JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<link rel="stylesheet" type="text/css" href="/Portals/1/images/wine/wine%20website/Wine%20Flower%20Pairings/WineFlowerParingStyles.css" />
<div class="wine-flower">
<table>
  <tr>
    <td>
        <a href="syrah.html">
            <div class="pairing Snapdragons-Syrah" title="Snapdragons - Syrah">
                <span class="visuallyhidden focusable">Snapdragons - Syrah</span>
            </div>
        </a>
    </td>
    <td colspan="2">
        <a href="merlot.html">
            <div class="pairing top-center-text" title="Two Texas Treasures. Good things spring from the Texas earth. The same soil that gives birth to the wine grape brings to life a wide array of colorful Texas plants. Pair two Texas treasures to make a Lone Star statement. Choose a flower or wine pairing from the grid, or click here to start at the top of the list.">
                <p class="visuallyhidden focusable">
                    Two Texas Treasures. Good things spring from the Texas earth. The same soil that gives birth to the wine grape brings to life a wide array of colorful Texas plants. Pair two Texas treasures to make a Lone Star statement.
                </p>
                <p class="visuallyhidden focusable">
                    Choose a flower or wine pairing from the grid, or click here to start at the top of the list.
                </p>
            </div>
        </a>
    </td>
    <td>
        <a href="blancdubois.html">
            <div class="pairing Larkspur-BlancDuBois" title="Larkspur - Blanc du Bois">
                <span class="visuallyhidden focusable">Larkspur - Blanc du Bois</span>
            </div>
        </a>
    </td>
  </tr>
  <tr>
    <td>
        <a href="tempranillo.html">
            <div class="pairing Cactus-Tempranillo" title="Cactus - Tempranillo">
                <span class="visuallyhidden focusable">Cactus - Tempranillo</span>
            </div>
        </a>
    </td>
    <td>
        <a href="viognier.html">
            <div class="pairing...

CSS

.wine-flower * {
    margin: 0 auto;
    padding: 0;
}
.wine-flower { background-color: #efecd6; }
.wine-flower a { text-decoration: none; }
.wine-flower table {
    border-spacing: 10px;
    margin: -10px auto 0;
    border-collapse: separate;
    border: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 700px;
    height: 900px;
    background-image: url('http://www.gotexan.org/Portals/1/images/wine/wine%20website/Wine%20Flower%20Pairings/intro/bg-intro.jpg');
}
.wine-flower table td { height: 175px; width: 175px; vertical-align: top; }
.wine-flower table td:first-of-type { text-align: right; }
.wine-flower table td:last-of-type { text-align: left; }
.wine-flower table tr:last-of-type > td { height: auto; }

.wine-flower .pairing {
    height: 175px;
    width: 175px;
}

.wine-flower .pairing.Snapdragons-Syrah { background-image: url('http://www.gotexan.org/Portals/1/images/wine/wine%20website/Wine%20Flower%20Pairings/intro/syrah.jpg'); }
.wine-flower .pairing.Snapdragons-Syrah:hover { background-image: url('http://www.gotexan.org/Portals/1/images/wine/wine%20website/Wine%20Flower%20Pairings/intro/syrah-over.jpg'); }

.wine-flower .pairing.top-center-text {
    width: 360px;
    background-image: url('http://www.gotexan.org/Portals/1/images/wine/wine%20website/Wine%20Flower%20Pairings/intro/home-center.jpg');
}
.wine-flower .pairing.top-center-text:hover { background-image: url('http://www.gotexan.org/Portals/1/images/wine/wine%20website/Wine%20Flower%20Pairings/intro/home-center-over.jpg'); }

.wine-flower .pairing.Larkspur-BlancDuBois { background-image: url('http://www.gotexan.org/Portals/1/images/wine/wine%20website/Wine%20Flower%20Pairings/intro/blancdubois-over.jpg'); }
.wine-flower .pairing.Larkspur-BlancDuBois:hover { background-image: url('http://www.gotexan.org/Portals/1/images/wine/wine%20website/Wine%20Flower%20Pairings/intro/blancdubois.jpg'); }

.wine-flower .pairing.Cactus-Tempranillo {...