Editorial App

form.html

<h2 class="text-2xl">Crear un Artículo</h2>

<form>
  <div>
    <label class="block">Título</label>
    <input type="text" class="border border-gray-300 rounded-xl" />
  </div>
  <div>
    <label class="block">Body</label>
    <textarea class="border border-gray-300 rounded-xl"></textarea>
  </div>
  <div>
    <label class="block">Título</label>
    <input type="number" class="border border-gray-300 rounded-xl" />
  </div>
  <button class="bg-gray-800 ml-2 px-4 py-3 rounded-lg text-sm text-white">
    Crear Artículo
  </button>
</form>

order.html

<div class="grid grid-cols-4 space-x-16">
  <div class="flex flex-col space-y-12">
    <div>
      <h3 class="text-extrabold text-2xl text-blueGrey-800 tracking-wide mb-4">
        Últimos Artículos
      </h3>
      <div class="w-full border-b-2 border-blueGrey-300"></div>
    </div>
    <ul class="flex flex-col space-y-12">
      <!-- Lista de artículos -->
    </ul>
  </div>
  <div class="col-span-3 flex flex-col items-start space-y-8">
    <h2 class="text-4xl text-blueGrey-800 font-extrabold tracking-wide">
      Carrito de Compras
    </h2>
    <ul class="w-full">
      <li class="flex justify-between px-12 py-5">
        <div class="text-xl font-semibold text-blueGrey-800">Mi articulo</div>
        <div class="text-xl text-blueGrey-600">$ 10.00</div>
      </li>
    </ul>
    <div class="self-end px-12 py-5">
      <span class="text-xl font-semibold text-blueGrey-800 uppercase mr-20"
        >Total</span
      >
      <span class="text-xl font-semibold text-blueGrey-800">$ 10.00</span>
    </div>
  </div>
</div>

PayButton.html.erb

<a
  href="#"
  class="self-end bg-vividGreen-500 text-vividGreen-50 py-3 px-8 rounded-lg text-xl mr-12 hover:bg-vividGreen-600"
>
  Pagar
</a>

profile.html.erb

<h2 class="text-4xl text-blueGrey-800 font-extrabold tracking-wide mb-16">
  Mi perfil
</h2>

<div class="grid grid-cols-2 space-x-16">
  <div class="flex flex-col space-y-12">
    <div>
      <h3 class="text-extrabold text-2xl text-blueGrey-800 tracking-wide mb-4">
        Artículos Comprados
      </h3>
      <div class="w-full border-b-2 border-blueGrey-300"></div>
    </div>

    <ul class="flex flex-col space-y-12">
      <!-- Lista de artículos -->
    </ul>
  </div>
</div>

subscription_alert

<div class="bg-yellow-100 py-3">
  <p class="text-lg font-light text-center text-yellow-600">
    Estás suscrito al plan <span class="font-bold">Básico</span>. Te quedan
    <span class="font-bold">5 artículos</span> este mes.
  </p>
</div>

subscriptions.html

<div class="flex flex-col space-y-16">
  <h2
    class="text-5xl text-blueGrey-800 font-extrabold tracking-wide text-center"
  >
    Precios
  </h2>
  <section class="grid grid-cols-3 space-x-8">
    <article
      class="
        border border-vividGreen-500
        rounded-lg
        px-10
        py-10
        shadow-xl
        flex flex-col
        space-y-8
      "
    >
      <h4 class="text-lg text-blueGrey-600 font-bold">Gratis</h4>
      <p class="text-sm text-blueGrey-500">
        * Acceso a todos los artículos que tengan la categoría
        <span class="font-bold">Free</span>.
      </p>
      <p class="text-blueGrey-500">
        <span class="text-blueGrey-800 text-4xl font-extrabold">$0</span>/mes
      </p>
      <a
        href="w-full bg-vividGreen-500 text-vividGreen-50 py-2 rounded-lg text-sm text-center font-bold"
        >Suscribirse</a
      >
    </article>
    <article
      class="
        border border-vividGreen-500
        rounded-lg
        px-10
        py-10
        shadow-xl
        flex flex-col
        space-y-8
      "
    >
      <h4 class="text-lg text-blueGrey-600 font-bold">Plan Básico</h4>
      <p class="text-sm text-blueGrey-500">
        * Acceso a <span class="font-bold">5 artículos</span> que tú elijas, sin
        importar el precio individual.
      </p>
      <p class="text-blueGrey-500">
        <span class="text-blueGrey-800 text-4xl font-extrabold">10.0</span>/mes
      </p>
      <a
        href="w-full bg-vividGreen-500 text-vividGreen-50 py-2 rounded-lg text-sm text-center font-bold"
        >Suscribirse</a
      >
    </article>
  </section>
  <p class="text-sm text-blueGrey-500 text-center">
    * Siempre podrás comprar cualquiera de los artículos al precio de su
    categoría
  </p>
</div>