JSFiddle - React, Tailwind, and code Playground

by Joseph Perez

HTML

<h1>
Jorge And Joe's Recipe App
</h1>
<br>
<span>Search for recipes</span>
<br>
<textarea rows="1" cols="50" autofocus placeholder="Tomatoes, beef, etc"></textarea>
<br>

<button class="buttons-options">Search for recipes that use these ingredients and also</button>

<button>Submit</button>

CSS

h1, span{
  text-align: center;
}

h1{
  background-color: #5F9EA0;
  color: white;
  margin-top: 0;
  padding: 30px 10%;
}

body{
  margin: 0;
  padding: 0;
  background: #E0FFFF;
}

span{
  font-size: 110%;
}

span, textarea, button, h1{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
textarea{
    outline: default;
    overflow: auto;
    resize: none;
}

button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    font-size: 20px;
}

.buttons-options{
  font-size: 12px;
  padding: 7.5px 16px;
  margin-bottom: 5px;
}