JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<section><h1>Atlanta Trip</h1><h2>Overview</h2><p>On the Atlanta trip, overall I'd like to accomplish the following (at a minimum):</p>
<ul><li>A fun daytime activity with just you, me, and Michelle.</li><li>A fun date night for you and me.</li><li>Some cuddling and TV for you and me.</li><li>A typical Zhuang family dinner following or followed by some adult time with you and your parents.</li></ul>
<p>My guess is all four of those will be easy to do. So we'll probably have room in the trip for more!</p>
<h3>Potential fun day things for you, me, and Michelle</h3><ul><li>Georgia Aquarium – the largest aquarium in the world is in Atlanta!?</li><li>Cruzers Electric Car &amp; Segway Tours – might be silly but seems like it could be pretty fun.</li><li>LEGOLAND Discovery Center Atlanta – not sure if this is fun or super silly, but Michelle might really like it. Not sure</li></ul>
<h3>Potential fun day things for you and me</h3><ul><li>Piedmont Park Conservancy - Picnic, walking, relaxing</li><li>Six Flags Over Georgia – could do a full day if we're into it. Might be too activity-y, but could be really fun, especially if the weather is nice.</li></ul>
    <h3>Potential fun night things for you and me</h3><ul><li>Hang out at your favorite Atlanta bar (assuming you have one)</li><li>Check out Underground Atlanta - seems like a thing to do. Probably super touristy, but I'm sure you'd know</li><li>Medieval Times Dinner &amp; Tournament – OK, so I don't think I actually want to do this. But one time, I watched <em>The Cable Guy</em>, and I totally thought Medieval Times was not a real thing. :)</li><li>Have a romantic dinner just you and me, OF COURSE. (See below)</li></ul>
    <h2>Dinner Places</h2><ul><li><a href="http://www.yelp.com/biz/two-urban-licks-atlanta">Two Urban Licks</a> – they had me at watermelon salad :)</li><li><a href="http://4thandswift.com" title="industrial chic">4th &amp; Swift</a> – "industrial chic"</li><li><a...

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url(http://fonts.googleapis.com/css?family=Lobster|Open+Sans:400italic,400,300,600);

::-webkit-scrollbar {
    width: .7rem;
}

::-webkit-scrollbar-thumb {
    background: #D93C82;
}

::-webkit-scrollbar-track {
    background: rgba(255,255,255,.1);
}
::-webkit-scrollbar-corner {
    background: #D93C82;
}

* {
    margin: 0;
}


/*
@media (min-width: 20px) { html { font-size: 1.5625% } }
@media (min-width: 40px) { html { font-size: 3.125% } }
@media (min-width: 60px) { html { font-size: 4.6875% } }
@media (min-width: 80px) { html { font-size: 6.25% } }
@media (min-width: 100px) { html { font-size: 7.8125% } }
@media (min-width: 120px) { html { font-size: 9.375% } }
@media (min-width: 140px) { html { font-size: 10.9375% } }
@media (min-width: 160px) { html { font-size: 12.5% } }
@media (min-width: 180px) { html { font-size: 14.0625% } }
@media (min-width: 200px) { html { font-size: 15.625% } }
@media (min-width: 220px) { html { font-size: 17.1875% } }
@media (min-width: 240px) { html { font-size: 18.75% } }
@media (min-width: 260px) { html { font-size: 20.3125% } }
@media (min-width: 280px) { html { font-size: 21.875% } }
@media (min-width: 300px) { html { font-size: 23.4375% } }
@media (min-width: 320px) { html { font-size: 25% } }
@media (min-width: 340px) { html { font-size: 26.5625% } }
@media (min-width: 360px) { html { font-size: 28.125% } }
@media (min-width: 380px) { html { font-size: 29.6875% } }
@media (min-width: 400px) { html { font-size: 31.25% } }
@media (min-width: 420px) { html { font-size: 32.8125% } }
@media (min-width: 440px) { html { font-size: 34.375% } }
@media (min-width: 460px) { html { font-size: 35.9375% } }
@media (min-width: 480px) { html { font-size: 37.5% } }
@media (min-width: 500px) { html { font-size: 39.0625% } }
@media (min-width: 520px) { html { font-size: 40.625% } }
@media (min-width: 540px) { html { font-size: 42.1875% } }
@media...