JSFiddle - React, Tailwind, and code Playground

by maxwizardth

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <div class="main"> 
<div class="container1">
  <div class="container2">
    <div class="container3">
      <div class="container4">
        <div class="container5">
          <div class="container6">
           <div class="container7">
             <div class="container8">
              <div class="container9">
               <div class="circlein">
              <h6>ﻣدرسة  اﳌحجة البيضاء</h6>
                <h2>Clear Path College</h2>
             <h5>Ibadan</h5>
    <h5 id="date">&nbsp;21<sup>st</sup></h5>
   <h5 id="century"> &nbsp;Century-</h5>
   <h5 id="school">School</h5></div>
         </div>
     </div>
 </div> 
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

CSS

body {
    background-color: #000;
    color:red;
    font-size: 35px;   
}
/*this is the main css */
.main{position: relative;
    width: 340px;
    height: 340px;
    text-align: center;  
    top: 20vh;
    left: 22%;
    border: red solid 4px;
    padding: 73px;
    background: white;  
}
.container1,.container2,.container3,.container4,.container5,.container6,.container7,.container8,.container9{
    width:300px;
    height:300px;
    transform: rotate(40deg);
    border: red solid 3px;
    background: black;
}
.container1{
    border: 3px solid red ;
    background: red;
}
.container2{
    border: 3px solid orange ;
    background: orange;
}
.container3{
    border: 3px solid yellow ;
    background: yellow;
}
.container4{
    border: 3px solid #00ff00 ;
    background: green;
}
.container5{
    border: 3px solid #0000ff ;
    background: blue;
    }
.container6{  
    border: 3px solid indigo;
    background: indigo;
}
.container7{
    border: 3px solid  violet;
    background: violet;
}
.container8{border: 3px solid cyan ;
  background: cyan;
}
.container9{border: 3px solid red;
  background: #5544aa;
}
.circlein{border: 3px solid yellow;
border-radius: 50%;
height:280px;
width: 280px;
margin: 3%;
text-align: center;
background:black;}
h5{
margin-top:-44px;/*move top*/}
h2{margin-top: -63px;/*move top*/
color: white}
#date{margin-top:-80px;color: white;/*move top*/
  margin-left: -190px;transform: rotate(60deg);}
  /*bend the text*/
#century{margin-left: -30px; /*shift to right side*/
margin-top: -42px;
color: white}
#school{margin-left: 165px;
transform: rotate(-40deg);
margin-top: -110px;color: white;}