JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li class="first">
        <p>Первый абзац</p>
        <p>Цвет: <span style="background: #ff0000"></span> <span style="background: #0000ff"></span> <span style="background: #008000"></span>
        <p>Шрифт
            <select>
                <option>Arial</option>
                <option>Tahoma</option>                        
                <option>Times New Roman</option>                                                
            </select>
        </p>                                        
    </li>
    <li class="second">
        <p>Первый абзац</p>
        <p>Цвет: <span style="background: #ff0000"></span> <span style="background: #0000ff"></span> <span style="background: #008000"></span>
        <p>Шрифт
            <select>
                <option>Arial</option>
                <option>Tahoma</option>                        
                <option>Times New Roman</option>                                                
            </select>
        </p>                                        
    </li>
    <li class="third">
        <p>Первый абзац</p>
        <p>Цвет: <span style="background: #ff0000"></span> <span style="background: #0000ff"></span> <span style="background: #008000"></span>
        <p>Шрифт
            <select>
                <option>Arial</option>
                <option>Tahoma</option>                        
                <option>Times New Roman</option>                                                
            </select>
        </p>                                        
    </li>            
</ul>
<div class="p_1">
    <p>Lorem ipsum dolor sit amet consectetuer cursus habitant sociis et tincidunt. At a Curabitur tincidunt urna mi libero eget convallis Quisque augue. Sed libero In convallis dis ultrices fringilla mollis Pellentesque nec pede. At est est Mauris pede ac Vestibulum Nunc Sed diam pellentesque. Vivamus id nibh Aliquam et Donec ullamcorper consequat ut sem Nam. Ipsum eros a laoreet sapien Suspendisse...

CSS

* {margin: 0; padding: 0;}
body {padding: 20px; font-family: Arial;}            
ul {list-style: none; width: 250px;}
li {margin: 15px 0; border-bottom: 1px solid silver}    
li p {margin: 10px;}
li span {display: inline-block; width: 15px; height: 15px; margin: 0 2px; cursor: pointer;}        
div {margin: 15px 0;}

JavaScript

$(document).ready(function() {
/* Настройки первого параграфа */
    $('.first span').click(function() {
        var color = $(this).css('background-color');
        $('.p_1').css({'color' : color});
    })
    
    $('.first select').change(function() {
        var font = $(this).val();
        $('.p_1').css({'font-family' : font});
    });
/* Настройки второго параграфа */
    $('.second span').click(function() {
        var color = $(this).css('background-color');
        $('.p_2').css({'color' : color});
    })
    
    $('.second select').change(function() {
        var font = $(this).val();
        $('.p_2').css({'font-family' : font});
    });
    
/* Настройки третьего параграфа */
    $('.third span').click(function() {
        var color = $(this).css('background-color');
        $('.p_3').css({'color' : color});
    })
    
    $('.third select').change(function() {
        var font = $(this).val();
        $('.p_3').css({'font-family' : font});
    });    
});