JSFiddle - React, Tailwind, and code Playground

by mpd2019top

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<details class="shdowtech_details">
  <summary>كم سعر القالب ؟</summary>
  <div>

    مدة الدعم الفني المجاني ستون يوماً من تاريخ شراء قالب سكويز، بعدها يكون الدعم الفني مدفوعاً، والدعم الفني لا يشمل تركيب القالب نظراً لوجود ملف شرح مصوّر كذلك فالدعم الفني لا يشمل برمجة إضافات جديدة .
  </div>
</details>

CSS

summary::-webkit-details-marker {
  display: none;
}
summary::-ms-details-marker {
  display: none;
}
summary::-moz-details-marker {
  display: none;
}
summary::-o-details-marker {
  display: none;
}
summary::details-marker {
  display: none;
}

.shdowtech_details summary {
  border: 0;
  outline: 0;
  cursor: pointer;
  background: -webkit-gradient(linear, left, from(#d24949), to(#9e44c9));
  background: linear-gradient(to left, #d24949, #9e44c9);
  padding: 10px 15px;
  color: #ffffff;
  font-weight: 900;
  border-radius: 5px;
  margin: 0 0 8px 0;
}
.shdowtech_details {
  border: 0;
  direction: rtl;
  outline: 0;
  color: #ffffff;
}
.shdowtech_details[open] div {
  border-radius: 5px;
  background-color: #eeeeee;
  color: #999999;
  padding: 20px;
  font-weight: 700;
}
.shdowtech_details:after {
  content: "\f078";
  font-family: fontawesome;
  font-weight: normal;
  position: absolute;
  left: 21px;
  top: 16px;
  font-size: 20px;
}
.shdowtech_details[open]:after {
  content: "\f077";
}