JSFiddle - React, Tailwind, and code Playground

by aronlilland

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="wrapper">
    <div class="box box1">
      <div class="image">
        <a href="http://www.moorelife.org/freedownloads-serieslist.php?" target="_blank">
          <img src="img/resources/keith_moore.jpg" alt="keith moore" class="resource_image">
        </a>
      </div>
      <div class="text">
        <p><h2>Keith Moore</h2>
          Teacher/Pastor, I reffer to Keith as my "bible college experience,"
          he has 30+ years of free audio and video available on any and every
          subject.</p>
      </div>
    </div>
    <div class="box box2">
      <div class="image">
        <a href="https://www.youtube.com/playlist?list=PLIXcY2izjpDgROo3MRlAU2MJSyjthXLLc" target="_blank">
          <img src="img/resources/kenneth_hagin.jpg" alt="kenneth hagin" class="resource_image">
        </a>
    </div>
      <div class="text">
        <p><h2>Kenneth Hagin</h2>
          Prophet, with nearly 70 years of ministry under his belt, Hagin most
          commonly preached on the subject of faith in Gods word.</p>
      </div>
    </div>
    <div class="box box3">
      <div class="image">
        <a href="https://www.youtube.com/playlist?list=PLEtP4XPKdli585uNfIU8WNRYawCusmEYK" target="_blank">
          <img src="img/resources/bill_johnson.jpg" alt="bill johnson" class="resource_image">
        </a>
      </div>
      <div class="text">
        <p><h2>Bill Johnson</h2>
          Apostle/Pastor, Bill pastors a church in Redding California named
          Bethel Church, the church is most known for miracles, signs and
          wonders.</p>
      </div>
    </div>
    <div class="box box4">
      <div class="image">
        <a href="https://www.youtube.com/user/ToddWhiteChannel/videos" target="_blank">
          <img src="img/resources/todd_white.jpg" alt="todd white" class="resource_image">
        </a>
      </div>
...

CSS

* {
  margin: 0 auto;
  font-family: helvetica;
}

html, body {
  background: #eeeeee;
}

#wrapper {
  width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  //height: 1200px;
}

.box1{background:#DCC6E0}
.box2{background:#663399}
.box3{background:#446CB3}
.box4{background:#336E7B}
.box6{background:#F89406}
.box8{background:#D91E18}
.box9{background:#ABB7B7}

.box {
  color: white;
  margin: 0 auto;
  max-width: 400px;
  max-height: 300px;
  text-align: center;
  color: #333333;
}

.image {
  height: 200px;
  width: 400px;
  border-bottom: 0;
  border-radius: 10px;
  }

  .image img {
    border-radius: 4px;
  }

.text {
  width: 400px;
  height: 100px;
  text-align: left;
  padding-top: 8px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

.text h2 {
  font-size: 20px;
  margin: 0;
}
.text p {
  font-size: 10px;
  margin: 0;
  //line-height: 100px;
}