JSFiddle - React, Tailwind, and code Playground

by edd tou

HTML

<div id="warpper">
    <div class="carre">
       
         <div class="contenuwarpper">
               <div class="text">
                   
                 <h1>ici mon contenu</h1>
                 <p>blabla blabla blabla blabla blabla blabla blabla blabla</p>
                 <p>blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla blabla</p>
                  <p>blabla blabla blabla blabla blabla blabla blabla</p>
               
              </div>
        
               <div class="aligncenter"></div>
             </div>
             
             
             
             
        <div class="ornement">
           <div class="hautgauche"></div>
           <div class="hautdroite"></div>
           <div class="basgauche"></div>
           <div class="basdroite"></div>
        </div>

             
             
    </div>
</div>

CSS

#warpper{
    background-color: blue;
    width:35%;
    position: relative;
}

/* ici pour faire un beau carre */

.carre{
    padding-bottom: 100%;
    height:0;
}

/* mes ornements magnifique */

.ornement > div{
    background-color: black;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    position: absolute;
}

.hautgauche, .hautdroite{
    top: 5px;
}

.basgauche, .basdroite{
  bottom: 5px;
}

.hautgauche, .basgauche{
    right: 5px;
}

.basdroite, .hautdroite{
    left: 5px;
}

/* je centre mon contenu */

.contenuwarpper{
    width: 100%;
    height: 100%;
    position: absolute;
    margin: auto;
    left: 0;
    margin: 0;
    top: 0;
    bottom: 0;
}



.aligncenter, .text{
   display: inline-block; 
   vertical-align: middle;
}

.aligncenter{
    height:100%;
    width:0;
}

/* mon style + marge de mon contenu */

.text{
    text-align: center;
    padding: 5px;
}

.text > *:last-child{
    padding-bottom:0;
    margin-bottom:0;
}

.text > *:first-child{
    padding-top:0;
    margin-top:0;
}