JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<div class="container">
    <div class="image">
      <img src="./images/illustration-woman-online-desktop.svg" alt="">
      <img class="box" src="./images/illustration-box-desktop.svg" alt="">
    </div>
    <div class="faq">
      <h2>FAQ</h2>
      <div class="faq-one">
        <input type="radio" name="accor" id="ques-one">
        <label for="ques-one">How many team members can I invite?<span><img src="./images/icon-arrow-down.svg" alt=""></span></label>
        <div class="content">
          You can invite up to 2 additional users on the Free plan. There is no limit on team members for the Premium plan.
        </div>
      </div>
      <div class="faq-two" id="faq-two">
        <input type="radio" name="accor" id="ques-two">
        <label for="ques-two">What is the maximum file upload size?<span><img src="./images/icon-arrow-down.svg" alt=""></span></label>
        <div class="content">
          No more than 2GB. All files in your account must fit your allotted storage space.
        </div>
      </div>
      <div class="faq-three">
        <input type="radio" name="accor" id="ques-three">
        <label for="ques-three">How do I reset my password?<span><img src="./images/icon-arrow-down.svg" alt=""></span></label>
        <div class="content">
          Click “Forgot password” from the login page or “Change password” from your profile page. A reset link will be emailed to you.
        </div>
      </div>
      <div class="faq-four">
        <input type="radio" name="accor" id="ques-four">
        <label for="ques-four">Can I cancel my subscription?<span><img src="./images/icon-arrow-down.svg" alt=""></span></label>
        <div class="content">
          Yes! Send us a message and we’ll process your request no questions asked.
        </div>
      </div>
      <div class="faq-five">
        <input type="radio" name="accor" id="ques-five">
        <label for="ques-five">Do you provide additional support?<span><img src="./images/icon-arrow-down.svg"...

CSS

.image {
  position: relative;
  padding: 50px 50px 50px 0;
  margin-left: -50px;
  /* overflow: visible; */
  overflow: hidden;
}

.box {
  position: absolute;
  top: 190px;
  left: -30px;
  overflow: hidden;
}

.faq {
  padding: 50px;
  padding-bottom: 0;
}

.faq h2 {
  color: hsl(238, 29%, 16%);
  font-size: 28px;
  padding-bottom: 20px;
}

.faq > div {
  border-bottom: 1px solid hsl(240, 5%, 91%);
}

.faq span {
  transition: 0.4s;
  float: right;
}

label {
  display: block;
  cursor: pointer;
  width: 100%;
  text-align: left;
  padding: 15px 15px 15px 0;
  color: hsl(237, 12%, 33%);
  transition: 0.4s;
}

label:hover {
  color: hsl(14, 88%, 65%);
}

input {
  display: none;
}

.content {
  padding: 5px 0px;
  margin: 0 0 1px 0;
  border-radius: 3px;
  color: hsl(240, 6%, 50%);
  font-size: 14px;
  overflow: hidden;
  height: 0;
  opacity: 0;
  transition: height 0.4s, opacity 0.4s;
}

input:checked ~ .content {
  height: 60px;
  opacity: 1;
}

input:checked ~ label {
  color: hsl(238, 29%, 16%);
  font-weight: 700;
}

input:checked ~ label span {
  transition: 0.4s;
  transform: rotate(180deg);
}