Tabs

Basic examples

Default
Informations
Prénom et Nom
Date de naissance
Genre
Fille
Garçon
Matricule
Commentaire
Rapports Journaliers
Faut-il envoyer automatiquements les rapports journaliers aux tuteurs?
Oui
Non
Tuteur
Prénom et Nom
Numéro de téléphone
Email de contact
Ajouter une pièce jointe
Ajouter un fichier
Contrat
60h
Pièce jointe
Ajouter une pièce jointe
Ajouter un fichier
Semaine type
Cette option vous donne la possibilité de communiquer les horaires de votre enfants.
Lundi
Mardi
Mercredi
Jeudi
Vendredi
Samedi
Dimanche
Historique
Album
20/02/2020
Show code

<div class="tabs">
  <ul class="tabs__triggers">
    <li class="-current"><button><img src="../../assets/icons/info-active.svg" /></button></li>
    <li><button><img src="../../assets/icons/date-active.svg" /></button></li>
    <li><button><img src="../../assets/icons/historic-active.svg" /></button></li>
    <li><button><img src="../../assets/icons/album-active.svg" /></button></li>
  </ul>
  <div class="tabs__content">
    <div class="whiteContainer -current">
    <p class="whiteContainer__title">Informations</p>
    <div class="whiteContainer__content">
      <div class="whiteContainer">
        <div class="whiteContainer__container">
          <div class="field">
            <label>Prénom et Nom</label>
            <input type="text" placeholder="">
          </div>
          <div class="field">
            <label>Date de naissance</label>
            <span class="field__icon">
              <input type="text" placeholder="Enfants Heureux" >
              <span class="icon-date-blue "><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></span>
            </span>
          </div>
          <div class="field">
            <label>Genre</label>
            <div class="buttonsGroup">
              <div class="button"><input type="radio" name="1" value="Oui"> <span>Oui</span></div>
              <div class="button"><input type="radio" name="1" value="Non"> <span>Non</span></div>
            </div>
          </div>
          <div class="field">
            <label>Matricule</label>
            <input type="text" placeholder="">
          </div>
          <div class="field">
            <label>Commentaire</label>
            <input type="text" placeholder="">
          </div>
        </div>
      </div>
    
      <div class="whiteContainer">
        <p class="whiteContainer__title">Rapports Journaliers</p>
        <div class="whiteContainer__container">
          <label>Faut-il envoyer automatiquements les rapports journaliers aux tuteurs?</label>
          <div class="buttonsGroup">
            <div class="button"><input type="radio" name="2" value="Oui"> <span>Oui</span></div>
            <div class="button"><input type="radio" name="2" value="Non"> <span>Non</span></div>
          </div>
        </div>
      </div>

      <div class="whiteContainer">
        <p class="whiteContainer__title">Tuteur</p>
        <div class="whiteContainer__container">
          <div class="field">
            <label>Prénom et Nom</label>
            <input type="text" placeholder="">
          </div>
          <div class="field">
            <label>Numéro de téléphone</label>
            <input type="tel" placeholder="">
          </div>
          <div class="field">
            <label>Email de contact</label>
            <input type="email" placeholder="">
          </div>
          <div class="field -file">
            <label for="inputFile">Carte d'identité</label>
            <input type="file" placeholder="Enfants Heureux" id="inputFile">
            <div class="field">
              Ajouter un fichier
              <span class="icon-edit "><span class="path1"></span><span class="path2"></span><span class="path3"></span></span>
            </div>
          </div>
        </div>
      </div>

      <button type="button" class="button -darkBlue -fullWidth">Ajouter un tuteur</button>
    
      <br><br>

      <div class="whiteContainer">
        <p class="whiteContainer__title">Contrat</p>
        <div class="whiteContainer__container">
          <div class="cardMultitasks">
            <div class="cardMultitasks__left">
              <button class="profil">
                <div class="icon"><img src="../../assets/icons/noborder/sheet.svg" alt="" /></div>
                <div class="name">
                  Plein temps
                </div>
              </button>
            </div>
            <div class="cardMultitasks__right">
            <span class="square has-background-blue-medium">60h</span>
              <button><img src="../../assets/icons/trash.svg" alt="" /></button>
            </div>
          </div> 
        </div>
      </div>

      <div class="whiteContainer">
        <p class="whiteContainer__title">Pièce jointe</p>
        <div class="whiteContainer__container">
          <div class="field -file">
            <label for="inputFile">Ajoutr une pièce jointe</label>
            <input type="file" placeholder="Enfants Heureux" id="inputFile">
            <div class="field">
              Ajouter un fichier
              <span class="icon-edit "><span class="path1"></span><span class="path2"></span><span class="path3"></span></span>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    </div>
    <div class="whiteContainer"></div>
    <div class="whiteContainer"></div>
    <div class="whiteContainer"></div>
  </div>
</div>