JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mini.css/2.0.2/mini-default.css">
<body>
  <h2><span class="cow_color">Blue</span> Cow by Gelett Burgess
    (published in The Lark, 1895)</h2>
  <p>I never saw a <span class="cow_color">Blue</span> Cow, 
    I never hope to see one;
    But I can tell you, anyhow, 
    I'd rather see than be one.
  </p>
  <p>Change the cow's color to:
    <input id="input_color" value="Purple">
    <button id="button_change">Change!</button>
  </p>
</body>

CSS

body { margin: 20px; }
#color_change { border: 1px solid; }
.cow_color { font-weight: bold; }

JavaScript

/* INSTRUCTIONS
Replace the words Blue with the entered text (e.g., Purple)
when "Change!" is clicked. You will need to:
1. Select the Change! button.
2. Set a click listener on the button to capture click events.
3. Retrieve and store the value currently in the input field.
4. Find and select all occurrences of the relevant text.
5. Replace the text with the stored value.
*/
$(document).ready(function() {

  /* Your code goes here */

      
});