JSFiddle - React, Tailwind, and code Playground
by von
HTML
<div class="row"></div><div class="row"><div class="column col-md-2 col-sm-2 col-xs-2"></div><div class="column col-sm-3 col-xs-3 col-md-8"><h1>Hello World</h1></div><div class="column col-md-2 col-sm-2 col-xs-2"></div></div><div class="row"><div class="column col-md-2 col-sm-2 col-xs-2"></div><div class="column col-sm-2 col-xs-2 col-md-4"><p><img src="https://images.unsplash.com/photo-1578489758854-f134a358f08b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80" width="600px" class="img-responsive"></p></div><div class="column col-sm-3 col-xs-3 col-md-4"><p><img src="https://images.unsplash.com/photo-1511550922027-748483beaf65?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" class="img-responsive"></p></div><div class="column col-md-2 col-sm-2 col-xs-2"></div></div><div class="row"><div class="column col-md-2 col-sm-2 col-xs-2"></div><div class="column col-sm-12 col-xs-12 col-md-8"><h4>Gallery</h4></div><div class="column col-sm-2 col-xs-2 col-md-2"></div></div><div class="row"><div class="column col-sm-2 col-xs-2 col-md-2"></div><div class="column col-sm-12 col-xs-12 col-md-8"><p>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
scroll-behavior: smooth;
}
main *,
main *::after,
main *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gallery {
display: flex;
flex-wrap: wrap;
}
figure {
width: 200px;
cursor: pointer;
margin: 10px;
}
figure .image {
width: 200px;
height: 200px;
object-fit: cover;
display: block;
pointer-events: none;
}
.image-span {
position: relative;
display: block;
pointer-events: none;
}
.image-span::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background-image: url("mag-icon.png");
background-position: 100% 100%;
background-size: 75%;
background-repeat: no-repeat;
pointer-events: none;
}
figure figcaption...