JSFiddle - React, Tailwind, and code Playground

by tjerabek

HTML

<a href="#" class="btn btn-call-to-action">Nová kampaň</a>
<ul class="campaign-menu">
    <li><a href="#">Produktová kampaň</a></li>
    <li><a href="#">Kampaň na službu</a></li>
</ul>

CSS

body{
    font-family: Arial;
    padding: 50px;
        font-size: 90%;
}
.btn-call-to-action{
    background: #2D96FF;
    padding: 10px 15px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    color: white;

    
    -webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
    -webkit-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.1);
    text-shadow: 0px 1px 1px #0d66bf;
}
.campaign-menu{
    position: absolute;
    background: white;
    border: 1px solid #CED1D4;
    -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
}
.campaign-menu > li > a{
    display: block;
    padding: 20px 25px;
    border-bottom: 1px solid #CED1D4;
    text-decoration: none;
    color: #555;
    font-weight: bold;
}