JSFiddle - React, Tailwind, and code Playground

by wisegorilla

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
  <div class="settings_section_wrap">
    <div class="settings_section_desc">
      <h2>Mautify Settings</h2>
      <p>You can control on this section the amount of points to add to contact when make a purchase, also you can control the tags labels</p>
    </div>

    <div class="settings_section">
      <form id="mautic_settings" method="POST" target="_blank">


        <div class="mautic_fields_settings">
          <div class="mautic_fields">
            <label for="products-field">Purchased Products Field Type</label>

            <select id="products-field" name="products-field">
              <option value="tags">Mautic Tags</option>
              <option value="multiselect">Mautic Multselect</option>
            </select>
          </div>


          <div class="mautic_fields">
            <label for="products-param-field">Products Parameters Fields Type</label>

            <span class="tooltip-wrap">
              <i class="fas fa-question-circle"></i>
              <span class="tooltip-content">Lorem ipsum dolor</span>
            </span>
						
            <select id="products-param-field" name="products-param-field">
              <option value="tags">Mautic Tags</option>
              <option value="multiselect">Mautic Multselect</option>
            </select>
          </div>
        </div>

        <div class="mautic_fields">
          <label for="purchase_points">Purchase Points</label>
          <input type="number" id="purchase_points" name="purchase_points" value="<?php echo get_settings()['purchase_points'] ?>" required>
        </div>


        <div class="mautic_fields">
          <label for="purchase_points">Purchase Points</label>
          <input type="number" id="purchase_points" name="purchase_points" value="<?php echo get_settings()['purchase_points'] ?>" required>
        </div>

        <div class="mautic_fields">
          <label...

CSS

* {box-sizing: border-box;}

body {
  margin: 30px 0 60px;
  font-family: -apple-system,BlinkMacSystemFont,San Francisco,Roboto,Segoe UI,Helvetica Neue,sans-serif;
  background-color: #f4f6f8;
  color: #212b36;
}

a {
  color: #007ace;
  text-decoration: none;
}

.settings_section_desc p {
    color: #637381;
    font-size: 14px;
}

/* Create two equal columns that floats next to each other */
.mautify_settings_wrapper {
  width: 55%;
  min-width: 768px;
  margin: auto;
  padding: 0 15px;
}

.settings_section_desc {
  float: left;
  width: 35%;
  padding: 10px;
}

.settings_section {
  float: left;
  width: 65%;
  padding: 10px;
  background-color: #fff;
  margin: auto;
  margin-bottom: 15px;
  padding: 20px;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(63,63,68,.05), 0 1px 3px 0 rgba(63,63,68,.15);
}

.settings_section_wrap:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 768px) {
  .settings_section_desc, .settings_section {
    width: 100%;
  }

  .mautify_settings_wrapper {
    width: 100%;
    min-width: 100%;
  }
}

.settings_section h2, .settings_section_desc h2 {
  margin-top: 0;
}

.settings_section_desc h2 {
  font-size: 18px;
}

/*
.settings_section button, .header button {
background-color: #fff;
border: 2px solid #eeedf1;
border-radius: 5px;
color: #529fd3;
padding: 8px 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px 0 0;
cursor: pointer;
}
*/
button:hover{
  background: linear-gradient(180deg,#f9fafb,#f4f6f8);
  border-color: #c4cdd5;
}


button{
  padding: 0 10px;
  height: 37px;
  background: linear-gradient(180deg,#fff,#f9fafb);
  border: 1px solid #c4cdd5;
  box-shadow: 0 1px 0 0 rgba(22,29,37,.05);
  border-radius: 3px;
  cursor: pointer;
  outline: none;
}


input, select, textarea{
  border-radius: 5px;
  border: 1px solid #ccc;
  width: 100%;
  padding: 8px;
  font-size: 16px;
}

label {
  display: block;
  margin-bottom:...