JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<div class='demo-box'>
  <header>
    <h3>
      title
    </h3>
  </header>
  <div class='demo-area'>
    <div class='demo'>
     
    </div>
  </div>
</div>

SCSS

body {
  background-color: white;
}
.demo-box {
    
    border-radius: 10px;
    width: 300px;
    background-color: #FAFAFA;
    border: 1px solid #eee;


    header {
      
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        text-align: center;
        border-bottom: 1px solid #eee;
        padding: 20px 0;
        background-color: #eee;
        
        h3 {
          margin: 0;
        }
    }

    .demo-area {
      
        padding: 20px 0;
        text-align: center;

        .demo {
            max-width: 98%;
            display: inline-block;
        }
    }

}