JSFiddle - React, Tailwind, and code Playground

by moshfeu

HTML

<div id = "app">

  <div id = "header">
    <div id = "navbar">
      <div class = "button">
        Button
      </div>
       <div class = "button">
        Button
      </div>
       <div class = "button">
        Button
      </div>
    </div>

  <div id="logo-wrapper">
      <div id = "logo">
        <img width="100" src="https://i.pinimg.com/originals/37/25/de/3725deaa9c536997aaa2f4956c2045b3.jpg"/>
      </div>
    </div>
  </div>

  <div id = "content">

    <div id = "sidebar">
      <div class = "sidebar-option">
        Option
      </div>

      <div class = "sidebar-option">
        Option
      </div>

      <div class = "sidebar-option">
        Option
      </div>
    </div>
    
    <form>
        <textarea></textarea>
    </form>
  </div>
</div>

CSS

/*
  Positioning
*/
#app  {
  display: flex;
  flex-direction: column;
  justify-items: center;
 
 
 }

#navbar  {
  display: flex;
  justify-content: flex-end;
  
}

 
#navbar .button  {
  margin-right: 20px;
  background-color: green;
}

#header  {
  background-color:  dimgray;
  display: flex;
  flex-direction: column;
  align-items: flex-end;

}

 #logo-wrapper  {
        display: flex;
        justify-content: center;
        flex-direction: row;
         width: 100%;

    }
    
#content  {
  display: flex;
  justify-content: center;
   border: 1px solid red;
  
 }
 
 #content > * {
   margin-right: auto;
 }

#sidebar  {
  margin-left: 0 !important;
   border: 1px solid black;
  }
 
 #content form  {
   margin-left: 0;
   border: 1px solid white;
   height:100%;
 }

/*
  Colors
*/

#sidebar  {
  background-color: yellow;
}

body  {
  background-color: chocolate;
}

#content textarea  {
  background-color: black;
  color: silver;
}