JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="cv">
  <div class="cv-item">
    <h3>L&amp;D Implementation</h3>
    <img src="https://carrknowledge.com/assets/missingimage.jpeg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut lectus libero. Curabitur elementum ante volutpat velit vestibulum accumsan. Ut ut varius odio.</p>
    <p><a href="#">All Projects</a></p>
  </div>
  <div class="cv-item">
    <h3>Online &amp; Asynchronous</h3>
    <img src="https://carrknowledge.com/assets/missingimage.jpeg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut lectus libero. Curabitur elementum ante volutpat velit vestibulum accumsan. Ut ut varius odio.</p>
    <p><a href="#">All Projects</a></p>
  </div>
  <div class="cv-item">
    <h3>Brain-centric Design</h3>
    <img src="https://carrknowledge.com/assets/missingimage.jpeg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut lectus libero. Curabitur elementum ante volutpat velit vestibulum accumsan. Ut ut varius odio.</p>
    <p><a href="#">All Projects</a></p>
  </div>
  <div class="cv-item">
    <h3>Soft Skills</h3>
    <img src="https://carrknowledge.com/assets/missingimage.jpeg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut lectus libero. Curabitur elementum ante volutpat velit vestibulum accumsan. Ut ut varius odio.</p>
    <p><a href="#">All Projects</a></p>
  </div>
  <div class="cv-item">
    <h3>Keynotes &amp; Consulting</h3>
    <img src="https://carrknowledge.com/assets/missingimage.jpeg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ut lectus libero. Curabitur elementum ante volutpat velit vestibulum accumsan. Ut ut varius odio.</p>
    <p><a href="#">All Projects</a></p>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

body{
  background-color: #212529;
}
div.cv{
  display:block;
  text-align:center;
  font-family:helvetica, sans-serif;
  margin:auto;
  max-width:1000px;
  color: #fff;
  margin-top:30px;
  margin-bottom:30px;
}
div.cv>div.cv-item{
  display:inline-block;
  width:calc(31% - 4px);
  margin-left:1%;
  margin-right:1%;
  margin-bottom: 20px;
  vertical-align:top;
}
div.cv>div.cv-item>h3{
  font-family:'Roboto', sans-serif;
  color: #cccbcb;
  font-size:21px;
}
div.cv>div.cv-item>img{
  max-width:100%;
}
div.cv>div.cv-item>p{
  text-align:left;
  font-size: 14px;
}
div.cv>div.cv-item>p>a{
  background: #A68538;
  color: #ffffff;
  font-size: 15px;
  padding: 12px 30px;
  text-decoration: none;
  display: inline-block;
  margin-top: 4px;
  border: solid 1px transparent;
  text-shadow: none;
}
div.cv>div.cv-item>p>a:hover{
  background: #FFFFFF;
  color: #A68538;
  font-size: 15px;
  border: 1px solid #A68538;
}
@media only screen and (max-width: 900px) {
  div.cv>div.cv-item{
    width:calc(50% - 4px);
    margin-left:0%;
    margin-right:0%;
  }
}
@media only screen and (max-width: 580px) {
  div.cv>div.cv-item{
    width:calc(100% - 4px);
    margin-left:0%;
    margin-right:0%;
  }
}