JSFiddle - React, Tailwind, and code Playground

by Hui Zheng

HTML

<h1>Payment form</h1>
    
        <form id="payment">
        
            <fieldset>
            
                <legend>Your details</legend>
        
                <ol>
                    
                    <li>
                        <label for="name">Name</label>
                        <input id="name" name="name" placeholder="First and last name" required="" autofocus="" type="text">
                    </li>
                    
                    <li>
                        <label for="email">Email</label>
                        <input id="email" name="email" placeholder="[email protected]" required="" type="email">
                    </li>
                    
                    <li>
                        <label for="phone">Phone</label>
                        <input id="phone" name="phone" placeholder="Eg. +447500000000" required="" type="tel">
                    </li>
                        
                </ol>
            
            </fieldset>
            
            <fieldset>
            
                <legend>Delivery address</legend>
                
                <ol>
                
                    <li>
                        <label for="address">Address</label>
                        <textarea id="address" name="address" rows="5" required=""></textarea>
                    </li>
                    
                    <li>
                        <label for="postcode">Post code</label>
                        <input id="postcode" name="postcode" required="" type="text">
                    </li>
                    
                    <li>
                        <label for="country">Country</label>
                        <input id="country" name="country" required="" type="text">
                    </li>
                
                </ol>
            
            </fieldset>
            
            <fieldset>
            
                <legend>Card details</legend>
                
              ...

CSS

html, body, h1, form, fieldset, legend, ol, li {
    margin: 0;
    padding: 0;
    }

body {
    background: #ffffff;
    color: #111111;
    font-family: Georgia, "Times New Roman", Times, serif;
    padding: 20px;
    }

    h1 {
        font-size: 28px;
        margin-bottom: 20px;
        }
    
    form#payment {
        background: #9cbc2c;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
        counter-reset: fieldsets;
        padding: 20px;
        width: 400px;
        }
        
        form#payment fieldset {
            border: none;
            margin-bottom: 10px;
            }
        
        form#payment fieldset:last-of-type {
            margin-bottom: 0;
            }
            
            form#payment legend {
                color: #384313;
                font-size: 16px;
                font-weight: bold;
                padding-bottom: 10px;
                text-shadow: 0 1px 1px #c0d576;
                }
                
                form#payment > fieldset > legend:before {
                    content: "Step " counter(fieldsets) ": ";
                    counter-increment: fieldsets;
                    }
                
                form#payment fieldset fieldset legend {
                    color: #111111;
                    font-size: 13px;
                    font-weight: normal;
                    padding-bottom: 0;
                    }
            
            form#payment ol li {
                background: #b9cf6a;
                background: rgba(255,255,255,.3);
                border-color: #e3ebc3;
                border-color: rgba(255,255,255,.6);
                border-style: solid;
                border-width: 2px;
                -moz-border-radius: 5px;
                -webkit-border-radius: 5px;
                -khtml-border-radius: 5px;
                border-radius: 5px;
                line-height: 30px;
           ...