JSFiddle - React, Tailwind, and code Playground

by Gonzalo

HTML

<script src="https://cdn.tailwindcss.com"></script>
<!-- Main container -->
<div class="container p-4 mx-auto">
  <!-- Main box -->
  <div class="w-full p-4 bg-gray-100 rounded shadow-lg">
    <h1 class="mb-5 text-4xl text-center">IdeaBox</h1>
    <!-- Add Idea -->
    <section class="mb-6">
      <form class="sm:flex">
        <input
          type="text"
          placeholder="Add your idea"
          class="w-full p-3 sm:flex-auto"
        />
        <input
          type="submit"
          value="Add idea"
          class="w-full p-2 text-white bg-gray-600 sm:flex-1"
        />
      </form>
      <p class="user-actions">
        Please
        <a href="#">login</a>
        first
      </p>
      <p class="user-actions">Hi Juanito. <a href="#">Logout</a></p>
    </section>
    <!-- /.Add Idea -->
    <article class="p-3 mb-4 bg-gray-300 rounded-lg sm:flex sm:items-center">
      <!-- Info -->
      <section class="text-center sm:flex-1 sm:text-left">
        <h2 class="text-xl sm:leading-6 sm:text-2xl">idea</h2>
        <small>Junito</small>
      </section>
      <!-- /.Info -->
      <!-- Vote -->
      <section
        class="
          pt-3
          mt-6
          border-t-2 border-black
          sm:pt-0
          sm:pl-3
          sm:border-t-0
          sm:border-l-2
          sm:mt-0
          sm:flex
          sm:items-center
        "
      >
        <h3 class="text-3xl font-bold text-center">1</h3>
        <nav class="flex justify-center sm:block">
          remove
        </nav>
      </section>
      <!-- /.Vote -->
    </article>
  </div>
  <!-- /.Main box -->
</div>
<!-- /.Main container -->