JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<ul>
    <li><input type=checkbox name="color[]" value="Navy_Blue" data-Color="Navy_Blue"><span>Blue</span></li>
    <li><input type=checkbox name="color[]" value="Bright_Red" data-Color="Bright_Red">       
        Red</li>
    <li><input type=checkbox name="color[]" value="Black" data-Color="Black">Black</li>
    <li><input type=checkbox name="color[]" value="Gray" data-Color="Gray">Gray</li>
</ul>         
        
        <br/><br/>  
        <span style="background-color: Navy;" class="colorBox">&#10003;</span>
<div id="test">
    <input type=checkbox name="test" class="cbx" value="test">
    <label>Test</label>
</div>
<div id="test1">
    <input type=checkbox name="test" class="cbx" value="test1">
    <label>Test1</label>
</div>
<p class="yellow">there, friend!</p>
<p class="yellow">amigo!</p>

CSS

.yellow1 {
    background:yellow;
}

ul {margin-left:0px; padding-left: 0px}
li {  list-style:none; padding: 0 10px 0 0;margin:0px;}

.colorBox {
            border: 1px solid silver;
            vertical-align:baseline;
            margin-right:4px;
            margin-left:6px;
            width: 1.65em;
            height:1.65em;
            font-size:8px;
            float:left;
        }

JavaScript

//Same results
//$("p").prepend("<b>Hello </b>");
//$("<b>Hello </b>").prependTo("p");

$("<b>Hello </b>").prependTo(".yellow");
$("<b>Hello </b>").prependTo("#test1 label");

$("<div">7 </div>").prependTo("span");
//$($newdiv1).prepend("li span");
//var $newdiv1 = $('<div id="object1">Var </div>'),