JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="card-body">
        <div class="form-group row">
            <div class="col-lg-2">
                <div class="image-input image-input-outline" id="kt_image_1">
                    <div class="image-input-wrapper"
                        style="background-image: url(/app/assets/img/users/<?php echo $userInfo[0]['avatar_path'];?>/avatar.jpg)">
                    </div>
                    <label class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                        data-action="change" data-toggle="tooltip" title="" data-original-title="Change avatar">
                        <i class="fa fa-pen icon-sm text-muted"></i>
                        <input type="file" name="profile_avatar" accept=".png, .jpg, .jpeg" />
                        <input type="hidden" name="profile_avatar_remove" />
                    </label>
                    <span class="btn btn-xs btn-icon btn-circle btn-white btn-hover-text-primary btn-shadow"
                        data-action="cancel" data-toggle="tooltip" title="Cancel avatar">
                        <i class="ki ki-bold-close icon-xs text-muted"></i>
                    </span>
                </div>
            </div>
            <div class="col-lg-10">
                <div class="row">

                    <div class="col-lg-6">
                        <label>Nome próprio:</label>
                        <input type="text" name="firstName" class="form-control" value="" autocomplete="off" required />
                       ...