JSFiddle - React, Tailwind, and code Playground

HTML

<!-- blog.kevinchisholm.com -->

<!-- The HTML5 <datalist> Tag -->

<section>
    <img class="html5Logo" src="http://sub1.kevinchisholm.com/blog/images/html5-logo.png">
        <hgroup>
            <h1><a href="http://blog.kevinchisholm.com" target="_blank">blog.kevinchisholm.com</a></h1>
            <h2>The HTML5 &lt;datalist&gt; Tag</h2>
        </hgroup>
    <form>
        <label>Please enter a European City</label>
        <input type="text" list="euroCountries" />
    </form>
    <datalist id="euroCountries">
        <option value="Austria">
        <option value="Belgium">
        <option value="Czech Republic">
        <option value="Denmark">
        <option value="Estonia">
        <option value="France">
        <option value="Germany">
    </datalist>
</section>

CSS

body {
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
   font-weight: 300;
}
section{
    width: 60%;
    margin: 20px auto;
		padding:22px;
		background-color:#ededed;
		border:1px solid #ccc;
		-webkit-border-radius: 05px;
		-moz-border-radius: 05px;
		border-radius: 05px;
}
hgroup{display: inline-block;position:relative;top: -20px;vertical-align:top;margin: 0; padding: 0;}
h1 a{font-size:18px;color: #191970;}
h2{font-size:14px;color: #800000;}
form{margin: 0; padding: 0;}
label,input{display: block;margin: 20px 0}
label{font-weight:bold;}
.html5Logo{display:inline-block;width: 100px;}