JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div class="privacy-text-input">
    <input type="text" name="email" placeholder="[email protected]" />
    <select>
        <option>Public</option>
        <option>Limited</option>
        <option>Private</option>
    </select>
</div>

SCSS

/** COLORS */
    $dark: #252525;
    $white: #FEFEFE;

/** FONTS */
    $font-size: 13px;
    $line-height: 18px;
    $font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    $font-weight: 300;

@mixin font {
    font-family: $font-family;
    font-weight: $font-weight;
    font-size: 1em;
    line-height: $line-height/$font-size*1em;
}


html {font-size: $font-size/16px*100%}

body {
    @include font;
}

input, select {
    display: inline-block;
    height: 24px;
    margin: 0;
    padding: 0 2px;
    
    vertical-align: baseline;
    font-size: 1em;
    font-weight: inherit;
    
    border: 1px solid rgba(0,0,0,0.25);
}

input[type="text"] {
    
    
    width: 300px;
    box-shadow: inset rgba(0,0,0,0.15) 0 1px 2px;
}

select {
    -webkit-appearance: button;
    height: 24px;
        
    border-radius: 0;
}

JavaScript

/*(function () {
    
    var textfields = $('input[type="text"]').wrap('<div class="better-text"></div>');
    
    var privacyLevels = ["public","limited","private"];
    
    textfield.each(function () {
        var $this = $(this),
            privacySelect;
    
        privacySelect;
    
        $this.after(privacySelect)
    });
    
})();*/