JSFiddle - React, Tailwind, and code Playground

by bogdan_vq

HTML

<div id="feature">

 <header>
     <div class="panel">
       <div class="left-side logo">
         <div class="logo"></div>
       </div>
       <div class="right-side user-login-details">
         <button id="login" class="primary"></div>
       </div>
     </div>
 </header>


 <section id="side-menu" class="menu">
      <h1>Division Element #2</h1>
      <code class="example">position: relative;<br/></code>
 </section>

  <section id="users" class="my-user-list">
      <h1>Division Element #1</h1>
      <ul>
          <li>a</li>
          <li>b</li>
          <li>c</li>
          <li>d</li>
      </ul>
      <button id="edit" class="primary"></div>
  </section>

   <footer>
     <ul>
          <li><span>contact</span></li>
          <li><span>jobs</span></li>
      </ul>
   </footer>

</body>

CSS

#feature header {
  .....
}

#feature header .panel {
  .....
}

#feature header .panel .user-login-details .primary{
  .....
}

#feature #side-menu.menu {
  
}

#feature #side-menu.menu .example {
  
}