JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="container-fluid pt-3 pb-3">
  <div class="row">

    <div class="col-sm-6 order-sm-1 mb-3">

      <div class="alert alert-light border h-100" role="alert">
        Modification de la photo - Taille de l'image : 592 * 398 pixels
      </div>

    </div>

    <div class="col-sm-6 order-sm-3 mb-3">

      <div class="bg-white border p-4 justify-content-center text-center h-100">
        <form method="post" enctype="multipart/form-data">
          <div class="d-flex justify-content-center">
            <div class="text-center" style="max-width:300px">

              <a href="#" id="biopic_preview" data-toggle="lightbox" data-gallery="biography" data-type="image">
                <img src="somePIC" class="img-fluid" title="biopic">
              </a>

              <button type="button" name="biopic_preview" id="biopic_preview_btn" class="btn btn-outline-first btn-sm awmedias mt-3" data-width="398">
	                <i class="far fa-image fa-fw"></i> Choisir un fichier
	              </button>

            </div>
          </div>
          <button type="submit" name="biopic_post" value="biopic_post" class="btn btn-first btn-sm mt-3">Valider</button>
        </form>
      </div>

    </div>

    <div class="col-sm-6 order-sm-2 mb-3">

      <div class="alert alert-light border h-100" role="alert">
        Modification du texte de présentation - Longueur comprise entre 100 et 1000 caractères
      </div>

    </div>

    <div class="col-sm-6 order-sm-4 mb-3">

      <div class="bg-white border p-4 justify-content-center text-center h-100" style="min-height:590px !important;">
        <form method="post">
          <div class="d-flex justify-content-center">

            <textarea name="bio_text" id="bio_text" cols="50" rows="18">SOME TEXT</textarea>

          </div>
          <button type="submit" name="text_post" class="btn btn-first btn-sm...