JSFiddle - React, Tailwind, and code Playground

by danielkwood

HTML

<html>
  <head>
    <title></title>
  </head>
  
  <body>
    <div class="container">
      <div class="row">
      <!-- This is the first row -->
        <div class="column">
        <a href="page2.html">
          <div class="card1">

          </div>
        </a>
          
          <p class="cardtext">column 1 content goes here</p>
        </div>
        <div class="column">
          <div class="card2">

          </div>
          <p class="cardtext">column 2 content goes here</p>
        </div>
        <div class="column">
          <div class="card3">

          </div>
          <p class="cardtext">column 3 content goes here</p>
        </div>
      </div>

     
    </div>
  </body>
</html>

CSS

.container{
  width: 80%;
  margin: 0 auto;
}

.row{
  width: 100%;
  clear: both;
}

.column{
  float: left;
  width: 30%;
  margin: 5px;
}

.cardtext{
  padding-left: 5px;
}

.card1{
  background-image: url("image.png");
  background-color: grey;
  width: 100%;
  height: 150px;
}

.card2{
  background-image: url("image.png");
  background-color: grey;
  width: 100%;
  height: 150px;
}

.card3{
  background-image: url("image.png");
  background-color: grey;
  width: 100%;
  height: 150px;
}