JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<div class="buttonXL">
<a href="https://www.ziel.at" target="_blank"><strong><span>Zeile 1</span></strong><br />
<strong><span >Zeile 2</span></strong><br />
<strong>Info &amp; Zeile 3</strong></a>
</div>

CSS

.buttonXL a {

background: #D8D8D8;
display: block;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
padding: 10px;
color: black;
width: 350px;
font-size: 24px;
text-align: center;
border-radius: 6px;
box-shadow: 0px 3px 6px 2px rgba(0, 0, 0, 0.6);
text-decoration: none;
text-underline: none;
transition-property: background-color;
transition-duration: 1s; }

.buttonXL a:hover {

background-color: #5882FA;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;

}
a strong:nth-child(1) {color:red}
a strong:nth-child(3) {color:yellow}
a strong:nth-child(5) {color:green}