JSFiddle - React, Tailwind, and code Playground

by Bayu_Handono

HTML

<link href='http://fonts.googleapis.com/css?family=Ruslan+Display' rel='stylesheet' type='text/css'/>
<div align="center">
<div class="kotak1">
    <div class="typ">We ♥♥♥ Persib <center>Bandung Panceg Dina Kasur Eh Galur<br>☻</center><div> 
</div>

CSS

.kotak1 {
background:yellow;
border-bottom-right-radius:35%;
border-bottom-left-radius:35%;
width:250px;
padding-top:10px 10px 10px 10px;     
height:210px;
border:3px solid green;
box-shadow:3px 7px 15px #333;    
}    

.kotak1:hover {
background:green;  
box-shadow:3px 7px 15px #000;  
border:3px solid #aaa;     
}  


.typ {
cursor:pointer;
color:blue;
text-shadow:1px 1px 1px,
        3px 3px 5px,
        6px 4px 10px,
        9px 5px 15px,
        10px 6px 20px #39f;
font-family:Ruslan Display;
text-transform:Uppercase;
font-size:180%;
}

.typ:hover {
color:#39f;
text-shadow:
    0px 1px 0px #82C43A,
    0px 0px 3px #82C43A,
    0px 0px 5px #82C43A,
    0px 0px 30px #82C43A,
    0px 3px 50px #82C43A;
-webkit-transition:all 1s ease-out;
-moz-transition:all 1s ease-out;
-ms-transition:all 1s ease-out;
-o-transition:all 1s ease-out;
transition:all 1s ease-out;}
}