JSFiddle - React, Tailwind, and code Playground

by doctor23

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<details>
  <summary>
    test title
  </summary>
  <div>test description</div>
</details>
<details>
  <summary>
    test title
  </summary>
  <div>test description</div>
</details>
<details>
  <summary>
    test title
  </summary>
  <div>test description</div>
</details>
<details>
  <summary>
    test title
  </summary>
  <div>test description</div>
</details>
<details>
  <summary>
    test title
  </summary>
  <div>test description</div>
</details>

SCSS

details {
  width: 200px;
  margin-bottom: 10px;
  border: 1px solid black;
  background-color: lightgrey;

  &>summary {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    list-style: none;
    background-color: lightgrey;
    cursor: pointer;


    &::before {
      content: '';
      display: block;
      margin-right: 15px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 5px 5px 0 5px;
      border-color: red transparent transparent transparent;
    }
  }

  div {
    padding: 5px 10px;
    background-color: grey;
  }

  &[open] {
    
    &>summary {

      &::before {
        transform: rotate(180deg);
      }
    }
  }
}