JSFiddle - React, Tailwind, and code Playground

by Jorgelig

HTML

<div id="texto">
<div class="bday">Feliz Cumpleaños</div>
<div class="letra j">J</div>
<div class="letra o">O</div>
<div class="letra r">R</div>
<div class="letra g">G</div>
<div class="letra e">E</div>
<div class="letra l">L</div>
<div class="letra i">I</div>
<div class="letra g">G</div>
</div>

CSS

#texto{
width:auto;
height:auto;
font-size:36px;
font-family:"Comic Sans MS", cursive;
padding:50px 50px 50px 50px;
}
.bday{
width:330px;
height:auto;
display:block;
border:#CCCCCC 1px solid;
text-align:center;
box-shadow:0 1px 5px #CCCCCC;
}
.letra{
width:25px;
height:auto;
padding:10px 10px 10px 10px;
margin:0;
/*text-shadow: 0 2px 1px #CCCCCC;*/
border:#CCC solid 1px;
box-shadow: 0 10px 10px #ccc;
float:left;
margin-right:10px;
}
.j{
-webkit-transform-origin:left top;
-webkit-transform:rotate(40deg);
-moz-transform-origin:left top;
-moz-transform:rotate(40deg);
}
.o{
-webkit-transform-origin:left top;
-webkit-transform:rotate(30deg);
-moz-transform-origin:left top;
-moz-transform:rotate(30deg);
margin-top:28px;
}
.r{
-webkit-transform-origin:left top;
-webkit-transform:rotate(20deg);
-moz-transform-origin:left top;
-moz-transform:rotate(20deg);
margin-top:47px;
}
.g{
-webkit-transform-origin:right top;
-webkit-transform:rotate(10deg);
-moz-transform-origin:right top;
-moz-transform:rotate(10deg);
margin-top:47px;
}
.e{
-webkit-transform-origin:right top;
-webkit-transform:rotate(-10deg);
-moz-transform-origin:right top;
-moz-transform:rotate(-10deg);
margin-top:28px;
}
.l{
-webkit-transform-origin:right top;
-webkit-transform:rotate(-20deg);
-moz-transform-origin:right top;
-moz-transform:rotate(-20deg);
}
.i{
-webkit-transform-origin:right top;
-webkit-transform:rotate(-30deg);
-moz-transform-origin:right top;
-moz-transform:rotate(-30deg);
}
.g{
-webkit-transform-origin:right top;
-webkit-transform:rotate(-40deg);
-moz-transform-origin:right top;
-moz-transform:rotate(-40deg);
}
/*Colores*/
.j{ color:#F00; }
.o{ color:#0C0; }
.r{ color:#09F; }
.g{ color:#F90; }
.e{ color:#F3C; }
.l{ color:#FF6; }
.i{ color:#F00; }
.g{ color:#09F; }