JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<form id="myform" class="text-right">
    <div class="ilb bold monospace">Headers: </div>
    <select id="headerFont"> 
        <option value="Arial">Arial</option>
        <option value="Monospace">Monospace</option>
        <option value="Georgia">Georgia</option>
        <option value="Verdana">Verdana</option>
        <option value="Impact ">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
    
    <select id="headerSize">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
    
    <input id="headerBold" type="button" value="B" />
    <input id="headerItalics" type="button" value="I" />
    <input id="headerUnderline" type="button" value="U" />
    
</form>

<form id="myform" class="text-right">
    <div class="ilb bold monospace">Paragraphs: </div>
    <select id="paragraphFont"> 
        <option value="Arial">Arial</option>
        <option value="Monospace">Monospace</option>
        <option value="Georgia">Georgia</option>
        <option value="Verdana">Verdana</option>
        <option value="Impact ">Impact </option>
        <option value="Comic Sans MS">Comic Sans MS</option>
    </select>
    
    <select id="paragraphSize">
        <option value="7">7</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</option>
    </select>
    
    <input id="paragraphBold" type="button" value="B" />
    <input id="paragraphItalics" type="button" value="I" />
    <input id="paragraphUnderline" type="button" value="U" />
    
</form>

<br/>

<div id="container">
    <div id="float">
        <h1>Header Text</h1>
        <p>First Paragraph</p>
        <br>
        <h3>Header Text</h3>
        <p>Second Paragraph</p>
    </div>
</div>

CSS

.bold {font-weight: bold;}
.italics {font-style: italic;}
.underline {text-decoration: underline;}
.ilb {display: inline-block;}
.monospace {font-family: monospace;}
.text-right {text-align: right;}

.active {
    background-color: #B6B6B6;
    border: none;
    box-shadow: inset 2px 2px 5px rgba(255,255,255,0.25);
    color: black;
    outline: none;
}

#headerBold, #headerItalics, #headerUnderline, 
#paragraphBold, #paragraphItalics, #paragraphUnderline {width: 22px;}

#headerBold, #paragraphBold {font-weight: bold;}
#headerItalics, #paragraphItalics {font-style: italic;}
#headerUnderline, #paragraphUnderline {text-decoration: underline;}

form#myform {
    background-color: rgb(176, 212, 255);
    opacity: 0.1;
    padding: 1% 2%;
    position: absolute;
    right: 0;
    top: 0;
    width: 55%;
}
form#myform:hover, form#myform:active {
    opacity: 1;
}

form#myform:last-of-type {
    background-color: rgb(224, 91, 91);
    top: 12%;
}

JavaScript

// Header Fonts
$("#headerFont").change(function() {
    $('h1, h2, h3, h4, h5, h6').css("font-family", $(this).val());
});

$("#headerSize").change(function() {
    $('h1, h2, h3, h4, h5, h6').css("font-size", $(this).val() + "px");
});

$("#headerBold").click(function() {
    if($("h1, h2, h3, h4, h5, h6").hasClass("bold")) {
       $("h1, h2, h3, h4, h5, h6").removeClass("bold");  
    }
    else {
       $("h1, h2, h3, h4, h5, h6").addClass("bold");    
    }
    
    if($("#headerBold").hasClass("active")) {
       $("#headerBold").removeClass("active");  
    }
    else {
       $("#headerBold").addClass("active");    
    }
});

$("#headerItalics").click(function() {
    if($("h1, h2, h3, h4, h5, h6").hasClass("italics")) {
       $("h1, h2, h3, h4, h5, h6").removeClass("italics");  
    }
    else {
       $("h1, h2, h3, h4, h5, h6").addClass("italics");    
    }
    
    if($("#headerItalics").hasClass("active")) {
       $("#headerItalics").removeClass("active");  
    }
    else {
       $("#headerItalics").addClass("active");    
    }
});

$("#headerUnderline").click(function() {
    if($("h1, h2, h3, h4, h5, h6").hasClass("underline")) {
       $("h1, h2, h3, h4, h5, h6").removeClass("underline");  
    }
    else {
       $("h1, h2, h3, h4, h5, h6").addClass("underline");
    }
    
    if($("#headerUnderline").hasClass("active")) {
       $("#headerUnderline").removeClass("active");  
    }
    else {
       $("#headerUnderline").addClass("active");    
    }
});



// Paragraph Fonts
$("#paragraphFont").change(function() {
    $('p, li, span').css("font-family", $(this).val());
});

$("#paragraphSize").change(function() {
    $('p').css("font-size", $(this).val() + "px");
});

$("#paragraphBold").click(function() {
    if($("p").hasClass("bold")) {
       $("p").removeClass("bold");  
    }
    else {
       $("p").addClass("bold");    
    }
    
    if($("#paragraphBold").hasClass("active")) {
       $("#paragraphBold").removeClass("active"); ...