JSFiddle - React, Tailwind, and code Playground

by Omar X

HTML

<div id="container">
    <!-- login pod -->
    <div class="pod" id="authentication">
        	<h1>TITLE</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt sodales est ac pulvinar. Morbi sagittis risus eget nulla placerat, in volutpat neque accumsan. Suspendisse potenti.</p>
        <input type="text" id="user" placeholder="Username..." />
        <input type="password" id="pass" placeholder="Password..." />
        <input type="search" placeholder="Search..." /> <a href="#" class="ui-custom-btn" data-role="button">Custom Button</a>

        <input type="button" id="auth" value="Authenticate" />
    </div>
    <!-- console pod -->
    <div class="pod hide">
        	<h1>CONSOLE</h1>

        <div id="console"></div>
        <input type="text" placeholder="Command..." />
    </div>
</div>

CSS

div.ui-input-text {
    width: 50px !important
}
div.ui-input-search {
    width: 50px !important
}
.ui-custom-btn {
    width: 150px !important
}