JSFiddle - React, Tailwind, and code Playground

by alyonani

HTML

<div class="quote-wrapper" dir="rtl">
  <header>حكمة اليوم</header>
  <div class="quote-content">
    <!-- تم إضافة كلاس loading-quotes في البداية لإخفاء الأيقونات والنص -->
    <div class="quote-area loading-quotes">
      <span class="quote-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M9.983 3v10.828a4 4 0 1 1-2.261-3.602l.102-.043C9.07 9.49 9.87 6.46 9.983 3zm11 0v10.828a4 4 0 1 1-2.261-3.602l.102-.043C20.07 9.49 20.87 6.46 21.983 3z"/></svg>
      </span>
      <!-- نص فارغ تمهيداً لجلب الحكمة فوراً -->
      <p class="quote"></p>
      <span class="quote-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M14.017 21v-10.828a4 4 0 1 1 2.261 3.602l-.102.043C14.93 14.51 14.13 17.54 14.017 21zm-11 0v-10.828a4 4 0 1 1 2.261 3.602l-.102.043C3.93 14.51 3.13 17.54 3.017 21z"/></svg>
      </span>
    </div>
    <div class="author">
      <span class="dash" style="display:none;">— </span>
      <span class="name"></span>
    </div>
  </div>
  <div class="buttons">
    <div class="features">
      <ul>
        <li class="speech" title="استماع">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>
        </li>
        <li class="copy" title="نسخ">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
        </li>
        <li class="twitter" title="مشاركة على منصة X">
          <svg xmlns="http://www.w3.org/2000/svg"...