JSFiddle - React, Tailwind, and code Playground

by Reza Padillah

HTML

<a href="#" class="rpl"><p> SMK TI AIRLANGGA</p> </a>
<a href="#" class="mm"><p> SMK TI AIRLANGGA</p> </a>
<a href="#" class="tkj"><p> SMK TI AIRLANGGA</p> </a>

CSS

.rpl{
    background: #F19075;
    border-bottom: 3px solid #CE5837;
    border-right: 3px solid #CE5837;
    display: block;
    height: 40px;
    width: 190px;
    border-radius: 4px;
}

.mm{
    background: #41A85F;
    border-bottom: 3px solid #0d5922;
    border-right: 3px solid #0d5922;
    display: block;
    height: 40px;
    width: 190px;
    border-radius: 4px;
}

.tkj{
    background: #225bd6;
    border-bottom: 3px solid #08328c;
    border-right: 3px solid #08328c;
    display: block;
    height: 40px;
    width: 190px;
    border-radius: 4px;
}

p{
    padding-top: 10px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 2px #000;
}

a{
    color: #fff;
    text-decoration: none;
    cursor: pointer;