JSFiddle - React, Tailwind, and code Playground

by tomprogramming

HTML

<div class="inset">
    <h1>Surfs Up!</h1>
</div>

CSS

* {
 font-family: arial, sans-serif;   
}

h1 {
padding-top:30px;        
 font-weight:bold;
font-size:5em;    
}
div {
    color: rgba(255, 165, 0, 0.7);
    background:rgba(255, 228, 179, 0.7);
    margin:20px;
    text-align:center;box-shadow: inset 10px 10px 10px rgba(0,0,0,.7), inset -10px -10px 10px rgba(255, 228, 181, .5);
    border-radius:90% 20%  20% 90%;
    height:200px;
}

.inset {
    
    text-shadow: 1px 2px 4px rgba(255, 255, 255, 0.7), 0 0 0 rgba(0, 0, 0, 0.7), -1px -2px 4px rgba(255, 255, 255, 0.7);
}