JSFiddle - React, Tailwind, and code Playground
by Saran
HTML
<div class="col-md-4">
<div class="apt center-block">
<div class="back"></div>
<div class="title">Apartman #2</div>
<div class="images"></div>
<div class="spec">
<ul>
<li>Mal, ali vrlo miran</li>
<li>RomantiÄŤni pogled</li>
<li>Idealan za 1 osobu ili par</li>
</ul>
</div>
</div>
</div>
CSS
.col-md-4 {
width: 33%;
margin: 0 auto;
position: relative;
}
.apt {
position: relative;
display: inline-block;
background-color: rgba(0,0,0,0.1);
}
.apt .back {
z-index: -1;
position: absolute;
display:inline-block;
top: 0;
bottom: 0;
left: 10px;
right: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-color: rgba(166,103,31,0.5);
}
.apt .title {
position: relative;
display:inline-block;
font-family: 'Kaushan Script', cursive;
font-size: 24px;
padding: 5px 20px;
}
.apt .images {
position: relative;
display:inline-block;
width: 301px;
height: 225px;
background-color: rgba(100,100,100,1);
border-style: solid;
border-color: #ffb45e;
border-width: 5px;
}
.apt .spec {
position: relative;
display:inline-block;
font-family: 'Open Sans Condensed', sans-serif;
font-size: 18px;
}