JSFiddle - React, Tailwind, and code Playground

by Bayu_Handono

HTML

<div align="center">
    <div class="logo">Salam 234 1500/10 Batang<div class="typ">SEMBORO<br>Cita Rasa Legendaris<br>☻</div>
    </div></div>

CSS

.logo {
position:relative;
height:300px;
width:200px;
font-weight:700;    
background:
-webkit-radial-gradient(top, circle, #ddd, #555);
-webkitbox-shadow:8px 8px 15px 8px #888;
-o-box-shadow:8px 8px 15px 8px #888;
-moz-box-shadow:8px 8px 15px 8px #888;
-ms-box-shadow:8px 8px 15px 8px #888;
-khtml-box-shadow:8px 8px 15px 8px #888;
box-shadow:8px 8px 15px 8px #888;
padding:10px 10px 10px 10px;
border-radius:5px;
border-top:2px solid #d4b228;
border-bottom:2px solid #d4b228;
color:#d4b228;
}

.logo:before{
content:"";
height:10%;
width:95.7%;
position:absolute;
top:10.5%;
right:0.29%;
background:-webkit-radial-gradient(top, circle, red, darkred);
border-width:5px 5px;
border-style:solid;
border-color:#d4b228 transparent transparent transparent;
}


.logo:hover {
cursor:pointer;
position:relative;
height:300px;
width:200px;
background:
-webkit-radial-gradient(top, circle, #1cc, #555);
-webkitbox-shadow:8px 8px 15px 8px red;
-o-box-shadow:8px 8px 15px 8px red;
-moz-box-shadow:8px 8px 15px 8px red;
-ms-box-shadow:8px 8px 15px 8px red;
-khtml-box-shadow:8px 8px 15px 8px red;
box-shadow:8px 8px 15px 8px red;
padding:10px 10px 10px 10px;
border-radius:5px;
border-top:2px solid #d4b228;
border-bottom:2px solid #d4b228;
color:#d4b228;
-o-transition:all ease-out 1s;
-moz-transition:all ease-out 1s;
-ms-transition:all ease-out 1s;
-webkit-transition:all ease-out 1s;
transition:all ease-out 1s;
}

.typ {
position:absolute;
color:#333;;
top:35%;
right:8%;
font-size:25px; 
text-shadow:
        1px 1px 15px #39f,
        1px 1px 15px #38f,
        1px 1px 15px #37f,
        1px 1px 15px #35f,
        1px 1px 15px #33f;   
    
}