JSFiddle - React, Tailwind, and code Playground

by Praveen Kumar Purushothaman

HTML

<header>
    <h1><a href="#">Logo</a></h1>
</header>
<form action="">
    <ul>
        <li>
            <label>
                <strong>Name</strong>
                <input type="text" />
            </label>
        </li>
        <li class="left">
            <label>
                <strong>Picture</strong>
                <input type="text" />
            </label>
        </li>
        <li class="right">
            <label>
                <strong>Description</strong>
                <input type="text" />
            </label>
        </li>
        <li class="clear">
            <label>
                <strong>Prep Time</strong>
                <input type="text" />
            </label>
        </li>
        <li>
            <label>
                <strong>Utensil</strong>
                <input type="text" />
            </label>
        </li>
        <li>
            <label>
                <strong>Ingredient</strong>
                <input type="text" />
            </label>
        </li>
        <li>
            <label>
                <strong>Method</strong>
                <input type="text" />
            </label>
        </li>
    </ul>
</form>

CSS

body {font-family: Segoe UI, sans-serif;}
header h1 {margin: 0; font-size: 1em;}
form ul, form ul li {list-style: none; margin: 0; padding: 0;}
form ul li {padding: 5px 0;}
form ul li label, form ul li label strong {display: block;}
form ul li.left {float: left; width: 50%;}
form ul li.right {float: right; width: 50%;}
form ul li.clear {clear: both;}