JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div>
  <h1>Jaycee's Homepage</h1>
  <nav>
    <a>Home</a>
    <a>Contact</a>
  </nav>
</div>
<div class="cat-wrapper">
  <div>
    <img src="https://i.imgur.com/BCZs8A7.jpg" alt="Picture" height="500px" width="500px">
   </div>
  <div>Hello world</div>
</div>
<!-- <p>Check out <a href="http://www.google.com">qhjdkljald</a></p> -->

CSS

body {
    font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: ivory;
}

nav > a {
    display: inline-block;
    padding: 0 2%;
    border: 2px solid rosybrown;
    box-shadow: 2px 3px #dcd1d1;
}

nav > a:hover {
    background-color: rgb(207, 175, 175);
}

h1 {
    padding: 0 2%;
    font-size: 75px;
    font-weight: 100;
    text-align: left;
    color: rosybrown;
    opacity: 0.7;
}

.cat-wrapper {
    padding: 3%;
    height: 500px;
}

.cat-wrapper > div {
    display: inline-block;
}

img {
    border: 5px solid black;
    display: inline-block;
}