JSFiddle - React, Tailwind, and code Playground

by WOUNDEDStevenJones

HTML

<h1 class="upperleft">Lorem</h1>
<img class="kisses" src="background.jpg" alt="date">
<div class="strip"></div>
<div class="square">
  <ul class="style">
    <li class="S1"><a href="#">E</a></li>
    <li class="S1"><a href="#">D</a></li>
    <li class="S1"><a href="#">M</a></li>
  </ul>

</div>

CSS

.upperleft{
  font-family: Edwardian Script ITC;
  border-bottom: 2px solid black;
}

.kisses{
  max-width: 100%;
    max-height: 100%;
    height: auto;
}

.strip {
  height: 100px;
  width: 1000px;
  background-color: black;
  margin-top: 400px;
}


.S1{
  height: 150px;
  width: 150px;
  background-color: #555;
  float: left;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
  margin-right: 2px;
  }

.style{
  text-align: center;
  display: inline-table;
  width: 70%;
    margin: left;
    list-style: none;
    }