JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id="form-wrapper">
    <form>
        <div id="form-inner">
            <label for="name">Name:</label>
            <input type="text" class="input" id="name" placeholder="John Doe">
        
            <label for="email">Email:</label>
            <input type="email" class="input" id="email" placeholder="[email protected]">
        
            <label for="message">Message:</label>
            <textarea class="input textarea" id="message" placeholder="Your message here"></textarea>
            
             <input type="submit" class="button" value="Send message">
        </div>
    </form>
</div>

CSS

#form-wrapper
{
    width: 700px;
    height: 400px;
    margin: 0 auto;
    padding: 20px;    
    position: relative;
    border: 1px solid #ddd;
    
    background-color: #fff;
    background-image: -moz-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px, #3e4996,
                                                            #fff 200px, #fff 300px);

    background-image: -webkit-gradient(linear, left top, right bottom,
                                        color-stop(5%, #fff), color-stop(5%, #fff),                                        
                                        color-stop(15%, #844049), color-stop(15%, #fff),
                                        color-stop(25%, #fff), color-stop(25%, #fff),                                        
                                        color-stop(35%, #3E4996), color-stop(35%, #fff ),
                                        color-stop(45%, #fff), color-stop(45%, #fff),                                        
                                        color-stop(55%, #844049), color-stop(55%, #fff),
                                        color-stop(65%, #fff), color-stop(65%, #fff),                                        
                                        color-stop(75%, #3E4996), color-stop(75%, #fff ),
                                        color-stop(85%, #fff), color-stop(85%, #fff),
                                        color-stop(95%, #844049), color-stop(95%, #fff)                                
                                       );                                                            

    background-image: -webkit-repeating-linear-gradient(135deg,#844049,#844049,
                                                            #fff 50px, #fff 150px,
                                                            #3e4996 100px,...