<div class="flex flex-col bg-gray-300 p-10 font-sans-serif items-center justify-center">
  <div class="relative h-auto bg-white rounded-lg shadow-lg w-4/5">
    <div class="relative border-b-2">
      <h1 class="text-3xl m-4 text-gray-600">Agregar Productos</h1>
    </div>
    <div class="relative p-4" >
      <form class="relative" action="">
      <div class="mb-4 pt-0 flex flex-col">
        <label class="mb-2 text-gray-800 text-lg font-light" for="product_name">Nombre</label>
        <input type="text" id="product_name" class="border-2 rounded h-10 px-6 text-lg text-gray-600 focus:outline-none focus:ring focus:border-blue-300" autocomplete="off" />
      </div>
        <div class="mb-4 pt-0 flex flex-col">
        <label class="mb-2 text-gray-800 text-lg font-light" for="product_name">Precio</label>
        <input type="text" id="product_name" class="border-2 rounded h-10 px-6 text-lg text-gray-600 focus:outline-none focus:ring focus:border-blue-300" autocomplete="off" />
      </div>
      <div class="pt-0 flex flex-col">
        <label class="mb-4 text-gray-600 text-lg font-light" for="product_image">Imagen</label>
       <label for="product_image" class="flex flex-col items-center justify-center border-4 border-gray-300 border-dashed rounded h-36 px-6 text-lg text-gray-600 focus:outline-none focus:ring focus:border-blue-300 cursor-pointer"" autocomplete="off">
            <svg class="w-8 h-8 text-gray-600
            " xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/></svg>
            <span class="mt-2 text-base leading-normal text-blue-500 font-bold">Selecciona un archivo</span>
            <input type="file" id="product_image" class="hidden"/>
       </label>
        <p class="py-2 text-gray-400">Tipos de archivo aceptados: Solo .png y .jpg </p>
      </div>
    </form>
    </div>
    <div class="rel pt-0 flex flex-col p-4 w-full">
        <input type="submit" value="Guardar" class="bg-blue-500 text-white h-16 rounded-lg font-bold">
      </div>
  </div>
</div>
A

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.0.2/tailwind.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/lato-font/3.0.0/css/lato-font.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.