JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="expert_bg">
<div class="expert">

<div class="expert_item">
<div class="expert_photo"></div> 
<div class="expert_title">Name<span>Position</span></div> <div id="jb" class="about_link"><a href="javascript:;" onclick="about('james','jb');">More about Name</a></div>
<div id="james" class="expert_description">Blah Blah Blah.</div> 
</div>

<div class="item">
<div class="expert_photo"></div> 
<div class="expert_title">Name<span>Position</span></div> <div id="pb"  class="about_link"><a href="javascript:;" onclick="about('phoebe','pb');">More about Name</a></div>
<div id="phoebe" class="expert_description">Blah Blah Blah.</div> 
</div>

</div>
</div>

CSS

body {margin:0;font-size:10px;}



.expert_bg {background-color:lightBlue;padding:4em 0;}

.expert {max-width:1100px;margin:auto;padding:0 1em;box-sizing: border-box;
  display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-content: flex-start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    align-items: flex-start;}
    
    .expert_item {max-width:400px;font-size:1.6em;text-align:center;position:relative;}
    
    .expert_photo {width:300px;height:300px;background-color:#dedede;margin:auto;}
    
    .expert_title {padding:1em 0;font-weight:bold;}
    .expert_title span {display:block;font-weight:normal;font-size:0.9em;}
    .about_link {display:none;}
    
@media screen and (max-width: 480px) {
  .expert {    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    align-content: stretch;
    -webkit-align-items: stretch;
    align-items: stretch;
  }
.expert_item {padding:0.7em;border:1px solid #003162;margin-bottom:0.8em;}
.expert_photo {width:100px;height:100px;background-color:#dedede;margin:0 0.8em 0 0;}
.expert_title {text-align:left;padding:2em 0;position:absolute;top:0;left:0;margin-left:120px;height:100%;}
 .expert_description {text-align:left;padding:1em 0;display:none;}
 .expert_title span {}
 .about_link {display:block;position:absolute;bottom:0.5em;right:0.5em;}
  .about_link a {color:#003162;text-decoration:none;}
}

JavaScript

function about(x,y) {
var x = document.getElementById(x);
var y = document.getElementById(y);
x.style.display = "block";
y.style.display = "none";
}