JSFiddle - React, Tailwind, and code Playground

by _cronos2

HTML

<link rel="stylesheet" href="https://raw.github.com/necolas/normalize.css/master/normalize.css">
<form id="logicarama" action="" method="POST">
    <a href="help" id="help" class="twocol last">Dah fuck is this?</a>
    <div class="arrow-container">
        <span class="real-right-arrow"></span>
    </div>
    <div class="arrow-container fake">
        <span class="arrow-right"></span>
    </div>
    <input id="proposition" class="eightcol last" placeholder="(p => q) ^ q <-> r"></input>
    <div class="arrow-container fake">
        <span class="arrow-left"></span>
    </div>
    <div class="arrow-container">
        <span class="real-left-arrow"></span>
    </div>
    <input type="submit" id="generate" value="Generar tabla de verdad" />
</form>

CSS

form#logicarama {
    height:29px;
    padding:5px;
    background:#EEE;
}

input#proposition {
    float:left;
    height:23px;
    border:0;
    outline:0;
    padding:3px;
    font:20px monospace;
}

a#help {
    float:left;
    width:110px;
    border:0;
    padding:5px;
    background:#9CF1A4;
    color:black;
    text-decoration:none;
    -webkit-transition:padding 0.2s linear;
}
        
input#generate {
    border:0;
    padding:5px;
    background:#A2D6EB;
    color:black;
    -webkit-transition:padding 0.2s linear;
}        

a#help:hover, #generate:hover {
    padding:5px 15px;
}

.arrow-container {
    float:left;
    height:100%;
    margin:0;
    padding:0;
}

.arrow-container.fake {
    background:white;            
}

.arrow-container > * {
    display:inline-block;
    width:0;
    height:0;
    margin-top:9.5px;
    border:5px solid transparent;
}

.arrow-left {
    border-right-color:#EEE;
}

.real-left-arrow {
    border-right-color:#A2D6EB;
}

.arrow-right {
    border-left-color:#EEE;
}

.real-right-arrow {
    border-left-color:#9CF1A4;
}