JSFiddle - React, Tailwind, and code Playground

by Halit Yurttas

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<p style="text-align: center"><b>BİNANIZ&nbsp;</b></p>
<p style="text-align: center"><b>DEPREME DAYANIKLI MI?&nbsp;</b></p>
<p style="text-align: center"><b>İSTON’A SORUN</b></p>
<p>&nbsp;</p>
<p style="text-align: center"><b>İSTON Yapı ve Malzeme Laboratuvarı</b></p>
<p><br></p>
<p><b>RYTEİE 2019 (Riskli Yapıların Tespitine İlişkin Esaslar)&nbsp;</b></p>
<p>
  Riskli yapıların tespit edilmesine ilişkin 6306 sayılı Yasa kapsamında bina
  deprem güvenlik analizinin (statik tahkiki) yapılması.
</p>
<p><br></p>
<p><b>TBDY 2018 (Türkiye Bina Deprem Yönetmeliği)&nbsp;</b></p>
<p>
  Türkiye Bina Deprem Yönetmeliği’ne göre bina analizinin (statik tahkiki)
  yapılması.
</p>
<p><br></p>
<p><b>Avrupa Yakası Laboratuvarlarımız&nbsp;</b></p>
<p>Yenibosna Laboratuvar&nbsp;</p>
<p>Hadımköy Laboratuvar</p>
<p><br></p>
<p><b>Asya Yakası Laboratuvarlarımız&nbsp;</b></p>
<p>Altunizade Laboratuvar&nbsp;</p>
<p>Tuzla Laboratuvar</p>

<div class="accordion" id="accordionExample">
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        HAKKIMIZDA
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" style="">
      <div class="accordion-body">
        <strong>İSTON İstanbul Beton Elemanları ve Hazır Beton Fabrikaları San. ve Tic. A.Ş....

CSS

<div class="accordion" id="accordionExample">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h2>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the first accordion panel. This panel is shown by default, thanks to the <code>.show</code> class.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h2>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
      <div class="card-body">
        Some placeholder content for the second accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h2 class="mb-0">
        <button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h2>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
      <div class="card-body">
        And lastly, the placeholder content for the third and final accordion panel. This panel is hidden by default.
      </div>
    </div>
  </div>
</div>