JSFiddle - React, Tailwind, and code Playground

by oscard

HTML

<section class="main-content">
  <header class="header">
    <ul>
      <li class="logo">Logo</li>
      <li class="search"><input type="text" placeholder="Search"></li>
      <li>
        <div class="cpn-label">
          <div>CPN</div>
          <div>Communication Pénal Numérique</div>
        </div>
        <div class="cpn-bpn-toggle">
          <input type="radio" name="radio" checked value="CPN">
          <input type="radio" name="radio" value="BPN">
        </div>
        <div class="alert-notif">
          <span>notif<sup> (3)</sup></span>
        </div>
        <div class="user-info">
          Hélène PETITJEAN
        </div>
      </li>
    </ul>
  </header>
  <section class="content">
    <aside class="sidebar">
      <ul>
        <li><button>Ecrire un message</button></li>
        <li>
          <a href="">
            <span></span>
            <span>Boîte de réception</span>
          </a>
        </li>
        <li class="active">
          <a href="">
            <span></span>
            <span>Messages envoyés</span>
            <span><sup>(23)</sup></sazn>
          </a>
        </li>
        <li>
           <a href="">
            <span></span>
            <span>Rechercher un contact</span>
          </a>
        </li>
      </ul>
    </aside>
    <div class="wrapper-sent-message">
    </div>
    <div class="wrapper-sent-message-detail">
    </div>
  </section>
</section>

SCSS

*{
  color: #2e2e2e;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
}
.main-content{
  border: 1px solid #ccc;
  color: #2e2e2e;
  
  .header {
    box-shadow: 0 12px 24px 0 #56739619;

    ul{
      display: flex;
      list-style: none;
      border-bottom: 0;
      height: 135px;
      align-items: center;
      margin: 0;
      padding: 0;

      li {
        border: 0px solid #ccc;
        
        &.logo {
          width: 20%;
        }

        &.search {
          width: 30%;
        }

        &.search input {
          width: 86%;
          margin: 0px auto;
          border: 1px solid #2086fe;
          height: 40px;
          border-radius: 40px;
          padding: 0 15px
        }

        &:last-child {
          width: 50%;
          display: flex;
          justify-content: space-between
        }
      }
    }
  }

  .content {
    display: flex;
    
    .sidebar, .wrapper-sent-message, .wrapper-sent-message-detail{
      border-right: 1px solid #ccc;
      border-top: 0;
    }

    .sidebar {
      width: 20%;
      ul {
        list-style: none;
        margin-top: 0;
        padding: 0;
        
        li {
         
          &:first-child {
            height: auto;
          }
          
          & > button {
            width: 193.2px;
            height: 50px;
            border-radius: 59px;
            border: 0;
            background-color: #2086fe;
            color: #fff;
            margin-top: 45px;
            margin-bottom: 71px;
          }
          
          &.active {
           background-color: #deedff75;
          }
          
          & > a {
            text-decoration: none;
            height: 64px;
            display: inline-block;
            line-height: 64px;
          }
        }
      }
    }

    .wrapper-sent-message{
      width: 30%;
    }

    .wrappr-sent-message{
      width: 50%;
  ...