JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<div class="accordeon">

  <div class="tab">
    <span class="label">Prima</span>
    
    <div class="content">
      <p>
      Prima luce, cum quibus mons aliud consensu ab eo. Quae vero auctorem tractata ab fiducia dicuntur. Curabitur est gravida et libero vitae dictum.
      </p>
    </div>

  </div>

  <div class="tab">
    <span class="label">Etiam</span>
    
    <div class="content">
      <p>
      Etiam habebis sem dicantur magna mollis euismod. Cum ceteris in veneratione tui montes, nascetur mus. Non equidem invideo, miror magis posuere velit aliquet. Sed haec quis possit intrepidus aestimare tellus. Pellentesque habitant morbi tristique senectus et netus.
      </p>
    </div>

  </div>

  <div class="tab">
    <span class="label">Ullamco</span>
    
    <div class="content">
      <p>
      Ullamco laboris nisi ut aliquid ex ea commodi consequat. Cum sociis natoque penatibus et magnis dis parturient. Phasellus laoreet lorem vel dolor tempus vehicula. Quam diu etiam furor iste tuus nos eludet? Nihilne te nocturnum praesidium Palati, nihil urbis vigiliae.
      </p>
    </div>

  </div>

  <div class="tab">
    <span class="label">Curabitur</span>
    
    <div class="content">
      <p>
      Curabitur blandit tempus ardua ridiculus sed magna. Quam temere in vitiis, legem sancimus haerentia. Magna pars studiorum, prodita quaerimus. Phasellus laoreet lorem vel dolor tempus vehicula. At nos hinc posthac, sitientis piros Afros. Inmensae subtilitatis, obscuris et malesuada fames.
      </p>
    </div>

  </div>

  <div class="tab">
    <span class="label">Cras</span>
    
    <div class="content">
      <p>
      Cras mattis iudicium purus sit amet fermentum. Plura mihi bona sunt, inclinet, amari petere vellent. Fabio vel iudice vincam, sunt in culpa qui officia. Tityre, tu patulae recubans sub tegmine fagi dolor. Gallia est omnis divisa in partes tres, quarum. Me non paenitet nullum festiviorem excogitasse ad hoc.
      </p>
    </div>

  </div>

</div>

CSS

.accordeon {
  
}

.accordeon .tab {
  
  
}

.accordeon .tab .label {
  background-color: #f1f1f1;
  display: block;

}

.accordeon .tab .content {
  border-top: 2px solid #ccc;
}

.accordeon .tab .content p {
  margin-top: 0;
  padding-top: 0;
}

@media only screen and (min-width: 600px) {

  .accordeon .tab {
    clear: left;
  }
  
  .accordeon .tab .label {
    float: left;
    width: 200px;
  }

  .accordeon .tab .content {
    margin-left: 200px;
    display: none;
  }
  
  .accordeon .tab:first-child .content {
    border-left: 2px solid #ccc;
    border-top: 0;
    clear: right;
    display: block;
  }
  
}