JSFiddle - React, Tailwind, and code Playground

by alyonani

HTML

<!--[ Accordion by Freemium Tech ]-->

<div class='acdn'>

  <!--[ Accordion 1 ]-->

  <div class='ac'>

    <div class='acCont'>

      <input class='acMn' id='offaccor1' name='accordion-1' type='checkbox'/>

      <label class='acTtl' for='offaccor1'>

        <i class='acIcn'></i>

        

        <!--[ Accordion Title ]-->

        <span>منصة بلوجر Blogger</span>

      </label>

      <!--[ Accordion Content ]-->

      <div class='cont'>

        <p>هي استضافة ونشر المدونات الإلكترونية. تم تطويرها في عام 2003 من شركة جوجل Google لتكون متاحة للمستخدمين في نشر ومشاركة المحتوى بكافة أشكاله</p>

      </div>

    </div>

  </div>

  

  <!--[ Accordion 2 ]-->

  <div class='ac'>

    <div class='acCont'>

      <input class='acMn' id='offaccor2' name='accordion-2' type='checkbox'/>

      <label class='acTtl' for='offaccor2'>

        <i class='acIcn'></i>

        

        <!--[ Accordion Title ]-->

        <span>أهم مميزات مدونة بلوجر Blogger</span>

      </label>

      <!--[ Accordion Content ]-->

      <div class='cont'>

        <p>مدونة بلوجر بسيطة للغاية مقارنة بمنصات إنشاء المواقع الإخرى. مع ذلك ستجد بها العديد من المزايا والتي قد تناسب احتياجاتك دون الاضطرار لبناء موقع كامل بجهود تكاليف اعلى, وفيما يلي نستعرض أهم مزايا منصة بلوجر في إنشاء المواقع:</p>

      </div>

    </div>

  </div>

  

  <!--[ Accordion 3 ]-->

  <div class='ac'>

    <div class='acCont'>

      <input class='acMn' id='offaccor3' name='accordion-3' type='checkbox'/>

      <label class='acTtl' for='offaccor3'>

        <i class='acIcn'></i>

        

        <!--[ Accordion Title ]-->

        <span>تحسين الترتيب على محركات البحث</span>

      </label>

      <!--[ Accordion Content ]-->

      <div class='cont'>

        <p>تدعم شركة جوجل منصة بلوجر بشكل أساسي وتقدم لها كافة الخدمات لتحسين أداء المدونة بما فيها الربط والظهور ضمن نتائج محركات البحث المختلفة. مقارنة بالكثير من...

CSS

<style>

.acdn{position:relative;list-style:none;margin:30px 0;padding:0;font-size:14px;line-height:1.7em;font-family:inherit}
.acdn .ac{width:100%;padding:0 14px;margin:10px 0;background:#f0f0ff;border-radius:5px}
.acdn .ac:nth-child(4n + 1){background:#f0f0ff;border:1px solid #8a8aff}
.acdn .ac:nth-child(4n + 2){background:#fff0f3;border:1px solid #ff8aa1}
.acdn .ac:nth-child(4n + 3){background:#f0faff;border:1px solid #8ad8ff}
.acdn .ac:nth-child(4n + 4){background:#fff7f0;border:1px solid #ffc08a}
.acdn .cont{margin:0;padding-left:27px;padding-right:27px;position:relative;overflow:hidden;max-height:0;transition:all .3s ease;color:#08102b}
.acdn .cont ul,.acdn .cont ol{padding-left:13px}
.acdn .cont li{padding:0}
.acdn .cont a{text-decoration:none;color:#08102b}
.acdn .cont a:hover{text-decoration:underline}
.acdn p:first-child{margin-top:0}
.acdn p:last-child{border-radius: 4px;background:#ffffff;padding:10px;margin-bottom:0}
.acTtl{display:flex;align-items:center;font-weight:700;color:#08102b}
.acTtl span{display:flex;cursor:pointer;padding:16px 0;flex-grow:1}
.acTtl span:before{content:'';padding-left:15px}
.acIcn{flex-shrink:0;display:flex;align-items:center;width:12px;height:12px;position:relative}
.acIcn:before,.acIcn:after{content:'';display:block;width:100%;height:2px;border-radius:2px;background:#08102b}
.acIcn:after{position:absolute;transform:rotate(90deg)}
.acMn{display:none}
.acMn:checked ~ .acTtl .acIcn:after{visibility:hidden;opacity:0}
.acMn:checked ~ .cont{max-height:100vh;padding-bottom:8px}
.drK .acdn .ac{background:#252526;border:1px solid #4c4c4e}
.drK .acdn .cont,.drK .acdn .cont a,.drK .acTtl,.drK .acMn:checked ~ .acTtl{color:#fefefe}
.drK .acTtl .acIcn:before,.drK .acTtl .acIcn:after,.drK .acMn:checked ~ .acTtl .acIcn:before,.drK .acMn:checked ~ .acTtl .acIcn:after{background:#fefefe}

   </style>