JSFiddle - React, Tailwind, and code Playground

by velmurugansp

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- <div class="para">
        <p>piferh ieurthierth urthiuth gurhith yurgtihnfd utgijei gheguiwr yuegruiwej hegiwe egriwe </p>
    </div> -->
    <div class="container">
    <div class="text">
        <label>Text</label><textarea class="ip"></textarea>
    </div>
    <div class="color">
        <label>color</label><select id="col" name="colour">
            <option>red</option>
            <option>orange</option>
            <option>black</option>
            <option>pink</option>
            <option>white</option>
            <option>yellow</option>
            <option>blue</option> 
        </select>
    </div>
    <div class="bgcolor">
        <label>bg color</label><select id="bgcol" name="bgcolour">
            <option value="red">red</option>
            <option value="orange">orange</option>
            <option value="black">black</option>
            <option value="pink">pink</option>
            <option value="white">white</option>
            <option value="yellow">yellow</option>
            <option value="blue">blue</option>  
        </select>
    </div>
    <div class="size">
        <label>Size</label><textarea class="sz"></textarea><label>px</label>
    </div>
    <div>
        <button class="apply">apply</button>
    </div>
    <div>
        <button class="reset">reset</button>
    </div>
    
    </div>

CSS

.container{
    max-width: 30%;
    margin: 8%;
    background-color: gray;
}
.text{
    margin: 5%;
    padding-top: 5%;
}
.color{
    margin: 5%;
}
.bgcolor{
    margin: 5%;
}
.size{
    margin: 5%;
    
}
.apply{
    margin: 5%;
    
}
.reset{
    margin: 5%;
    
}

JavaScript

$(".apply").click(function(){
   var s= $(".ip").val();
   var c= $("#col").val();
   var b= $("#bgcol").val();
   var v= $(".sz").val();
  
   var o = $("<p></p>");
  	o.text(s);
  
   o.css({
         "color": c ,
         "background-color": b ,
         "font-size": v
   });
   $("body").append(o);
});
$(".reset").click(function(){
    // $(s).remove();
    // $("#col").empty();
    // $("#bgcol").empty();
    // $(".sz").empty();
    // $(".op").empty();
    $(".apply").show();
});