JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="bio" id="bio1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis, magna ut interdum pharetra, nunc ex vehicula dolor, nec fermentum orci mi in est. Vestibulum vulputate id erat sed vestibulum. Fusce augue ligula, luctus id est at, ultrices consectetur ipsum. Quisque euismod lacus purus, in ultrices quam placerat nec. Pellentesque id magna ut nisi cursus suscipit sed ac velit. Fusce ullamcorper rutrum erat sed lobortis. Nam magna massa, porttitor ac diam sed, molestie ullamcorper ipsum. Integer sodales maximus congue. Phasellus at neque elementum, sagittis eros vitae, accumsan odio. Morbi maximus ut felis et rhoncus. Integer ullamcorper quis nunc quis finibus.</div>

<div class="grid">

<div onclick="op('bio1')"><div class="w300">person 1</div></div>
<div><div class="w300">person 2</div></div>
<div><div class="w300">person 3</div></div>
<div><div class="w300">person 4</div></div>
<div><div class="w300">person 5</div></div>
<div><div class="w300">person 6</div></div>


</div>

CSS

body {
  margin: 0;
}

.bio {position: fixed;display:none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color:#fff;width:600px;margin:auto;}

.w300 {width:300px;height:300px;background-color:#999;margin:auto;}

.grid {
  display: grid;
  grid-template-columns: 320px 320px 320px;
  grid-gap: 20px 0;
  max-width:960px;margin:auto;

}
.grid>div {background-color:#000;}

@media screen and (max-width: 980px) {.grid {grid-template-columns: 320px 320px;max-width:640px;margin:auto;}}
@media screen and (max-width: 660px) {.grid {grid-template-columns: 320px;max-width:320px;margin:auto;}

.bio {width:100%;margin:auto;}

}

JavaScript

function op(el) {
document.getElementById(el).style.display = "block";
}
function clos(el2) {
document.getElementById(el2).style.display = "none";
}