JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>media</title>
</head>
<style>

    .wrap {
        width: 600px;
        margin: 0 auto;
    }
    .one {
        height: 20px;
        padding-top: 20px;
        margin-bottom: 10px;
    }
    .one p {
        float: left;
        height: 20px;
        width: 30%;
        margin: 0 1.5%;
    }
    .one p label {
        width: 20%;
        margin-right: 5%;
    }
    .one p input {
        display: inline-block;
        width: 66%;
        font-size: 12px;
        line-height: 20px;
        border: 1px solid #ccc;
        padding: 0 2%;
    }
    .one p select {
        display: inline-block;
        width: 66%;
        font-size: 12px;
        line-height: 20px;
        border: 1px solid #ccc;
        padding: 0 2%;
    }
    .two {
        width: 400px;
        margin-bottom:15px;
        height: 30px;
        margin: 0 auto
    }
    .two input {
        border:none;
        outline: none;
        width: 25%;
        float: left;
        margin: 0 4%;
        height: 25px;
        line-height: 25px;
        border: none;
        color: #fff;
    }
    .two input:nth-of-type(1) {
        background: #4AB847;
    }
    .two input:nth-of-type(2) {
        background: #D50005;
    }
    .two input:nth-of-type(3) {
        background: #FCD208;
    }
    .three {
        margin: 0 auto;
        width: 400px;
        height: 350px;
    }
    .three textarea {
        width: 400px;
        height: 350px;
        border: 1px solid #ccc;
        resize: none;
        font-size:2px;
    }
    .four .tips {
        color: red;
        font-size: 10px;
        margin: 10px 0;
    }

</style>
<body>
<form onsubmit="return false;">
    <div class="wrap">
        <div class="one">
            <p><label>min:</label><input type="number" required id="min" placeholder="min" min="1"></p>
            <p><label>max:</label><input type="number" required id="max" placeholder="max"></p>
            <p>
     ...