JSFiddle - React, Tailwind, and code Playground
HTML
<head>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/css/bulma.min.css" />
</head>
<body>
<div class="column is-one-third">
<div class="card large flip-card">
<div class="card-image">
<figure class="image">
<img src="https://icon2.cleanpng.com/20180809/qvb/kisspng-delta-computers-rentals-clip-art-computer-icons-photo-icons-matt-symbol-png-image-picpng-5b6ce7aa28da27.9546927915338638501673.jpg" >
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<p class="subtitle is-3">Ime Priimek</p>
</div>
</div>
<div class="content">
Test123
</div>
<div>
<a href="/nagrajenci/{{ $w['full_name_id'] }}">
<button class="button is-danger is-rounded">Test</button>
</a>
</div>
</div>
</div>
</div>
</body>
CSS
body {
font-family: Arial, Helvetica, sans-serif;
}
.flip-card {
background-color: transparent;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}
.flip-card:hover .flip-card-inner {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: #2980b9;
color: white;
transform: rotateY(180deg);
}