JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div id="preview">
    <p>Preview Recommended Style</p></div>
<div id="chooserecommended">
<p>Use Recommended Style</p></div>

<div id="display">
<input type="textarea" id="mainnamedisplay" value="JASMINE DUNCAN" />
<input type="textarea" id="vintagedisplay" value="2003" />
</div>
<div id="select">
<label for="color">Font color:</label>
<input type="text" id="color"/>
<div id="slider1"></div>

<label for="font_family">Font family:</label>
<input type="text" id="font_family" />
<div id="slider2"></div>
</div>

Need to have the "recommended style" as font-family=georgia and color=silver

CSS

#preview {margin:20px;padding:10px;}
#preview:hover {color:#F00;}
#chooserecommended {margin:20px}
#chooserecommended:hover {color:#F00;}

#mainnamedisplay {background:none; color:silver; font-family:georgia;font-weight:normal;width:400px;font-size:26px;text-align:center;margin:20px;}
#vintagedisplay   {background:none; color:silver; font-family:georgia;width:400px;font-size:26px;text-align:center;margin:20px;}

#color {margin:20px;color:#6db3c5; font-weight:normal;width:90px;text-align:left;}
#font_family {margin:20px;color:#6db3c5; font-weight:normal;width:90px;text-align:left;}

#select {margin:20px;}

#slider1, #slider2 {width:200px;}

JavaScript

$(function() {
var aColors = new Array('', 'black', 'grey', 'blue', 'navy', 'purple','red','maroon','green','olive','lime','silver','teal','white','yellow');
    $('#slider1').slider({
        value:1,
        min: 1,
        max: 14,
        step: 1,
        slide: function(event, ui) {
            var sColor = aColors[ui.value];
            $('#color').val(sColor);
            $('#mainnamedisplay').css('color', sColor);
             $('#vintagedisplay').css('color', sColor);
                 
        }
    });
    $('#color').val(aColors[$('#slider1').slider('value')]);
        
    

    var aFonts = new Array('', 'Verdana', 'arial', 'Tahoma', 'Times New Roman', 'Georgia');
    $('#slider2').slider({
        value:1,
        min: 1,
        max: 5,
        step: 1,
        slide: function(event, ui) {
            var sFontFamily = aFonts[ui.value];
            $('#font_family').val(sFontFamily);
            $('#mainnamedisplay').css('font-family', sFontFamily);
                 $('#vintagedisplay').css('font-family', sFontFamily);
             
        }
    });
    $('#font_family').val(aFonts[$('#slider2').slider('value')]);  
    
    $('div#preview').mousedown(function(e){
        e.preventDefault();
         $('#slider1').slider( "value" , 11 );
        $('#color').val(aColors[$('#slider1').slider('value')]);
         $('#slider2').slider( "value" , 5 );  
        $('#font_family').val(aFonts[$('#slider2').slider('value')]);          
  
    });
    
    $('div#preview').mouseup(function(e){
        e.preventDefault();
         $('#slider1').slider( "value" , 1 );
        $('#color').val(aColors[$('#slider1').slider('value')]);
         $('#slider2').slider( "value" , 1 );  
        $('#font_family').val(aFonts[$('#slider2').slider('value')]);          
  
    });    
});