<div class="w-full max-w-xs">
  <form class="bg-white rounded px-8 pt-6 pb-8 mb-4">
    <div class="mb-4">
      <label class="block text-gray-600 text-sm font-semibold mb-2" for="title">
        Title
      </label>
      <input
        class="bg-gray-100 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="title"
        type="text"
        placeholder="Protocol 3"
      />
    </div>

    <div class="mb-4">
      <label
        class="block text-gray-600 text-sm font-semibold mb-2"
        for="username"
      >
        Subtitle
      </label>
      <input
        class="bg-gray-100 appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="title"
        type="text"
        placeholder="protect the pilot"
      />
    </div>

    <div class="mb-4">
      <label
        class="block text-gray-600 text-sm font-semibold mb-2"
        for="username"
      >
        Description
      </label>
      <textarea
        rows="4"
        cols="50"
        class="bg-gray-100 p-1 appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
        id="description"
        type="text"
      />
      </textarea>
    </div>
    
        <div class="flex items-center justify-between">
      <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline" type="button">
        Create post
      </button>
      <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800" href="#">
        cancel
      </a>
    </div>
  </form>
  <p class="text-center text-gray-500 text-xs">
    &copy;2020 BT-7274. All rights reserved.
  </p>
</div>

<div class="w-64 flex shadow-lg flex-col bg-cover bg-center justify-content bg-white p-6 rounded pt-8 pb-8">
  <div class="text-center text-gray-500 mb-6">
    <h2>SIGN UP
    </h2>
  </div>
  <div>
    <form>
      <input class="bg-transparent border-b m-auto block border-gray-500 w-full mb-6 text-gray-500 pb-1" type="text"
             placeholder="Username"/>
      <input class="bg-transparent border-b m-auto block border-gray-500 w-full mb-6 text-gray-500 pb-1" type="password"
             placeholder="password"/>
      <div class="flex mt-4">
        <input type="checkbox" class="mr-2" name="agreement" value="agree">
        <p class="text-grey">Accept the
          <a href="#" class=" no-underline text-teal-500 hover:text-teal-400">Terms and Conditions
          </a>
        </p>
      </div>
      <input class="shadow-lg pt-3 pb-3 mt-6 w-full text-white bg-teal-500 hover:bg-teal-400 rounded-full "
             type="submit" value="SIGN IN">
    </form>
  </div>
  <div>
    <p class="mt-4 text-gray-500 text-sm">Have an account? 
      <a href="#"
         class="no-underline text-teal-500 hover:text-teal-400">Log in
      </a>
    </p>
  </div>
</div>

<div class="shadow-lg sm:flex">
  <div class="sm:w-2/5 w-full bg-gray-400 bg-cover bg-center text-white"
     style="background-image: url('')">
    <div class="p-8">
    <h1>SIGN<span class="text-indigo-400">UP</span></h1>
    <p class="leading-tight mt-2 text-sm text-white">Create an account to join our awesome community</p>
    </div>
  </div>
  <div class="sm:w-3/5 w-full bg-white">
    <div class="p-8">
    <form>
      <label for="username" class="text-xs text-gray-500">Username</label>
      <input id="username" class="bg-transparent border-b m-auto block border-gray-500 w-full mb-6 text-gray-700 pb-1" type="text"
         placeholder=""/>
      <label id="passowrd" class="text-xs text-gray-500">Password</label>
      <input id="password" class="bg-transparent border-b m-auto block border-gray-500 w-full mb-6 text-grey-700 pb-1"
         type="password"
         placeholder=""/>
      <input class="shadow-lg pt-3 pb-3 w-full text-white bg-indigo-500 hover:bg-indigo-400 rounded-full cursor-pointer "
         type="submit" value="Create account">
    </form>
    <div class="text-center mt-4">
      <p class="text-sm text-gray-600">Already have an account? <a href="#" class="no-underline text-indigo-500 font-bold hover:text-indigo-400">Sign in</a></p>
    </div>
    </div>
  </div>
</div>

  <div class="shadow-lg flex flex-col-reverse sm:flex-row">
      <div class="w-full bg-white p-4">
        <div class="text-gray-700">
          <h2>Login</h2>
          <p class="mt-2 text-xs text-gray-base">Lorem ipsum dolor sit amet</p>
        </div>
  
        <form>
          <div class="mt-3">
          <span class="flex bg-gray-300 items-center px-3">
            <i class="material-icons text-gray-400">person</i>
            <input class="bg-gray-300 p-2 w-full" type="text" placeholder="username">
          </span>
  
            <span class="flex bg-gray-300 items-center mt-2 px-3">
            <i class="material-icons text-gray-400">lock</i>
            <input class="bg-gray-300 p-2 w-full" type="text" placeholder="Password">
          </span>
          </div>
          <div class="flex justify-between items-center mt-4">
            <button class="bg-blue-500 hover:bg-blue-400 px-4 py-2 text-white">Login</button>
            <a href="#" class="text-xs underline-none text-blue-400 hover:text-blue-600">Forgot password?</a>
          </div>
        </form>
  
      </div>
      <div class="w-full bg-blue-500 p-4 text-white text-center flex flex-col justify-center ">
  
        <h4>Sign up Now</h4>
        <p class="text-sm mt-2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula
          eget </p>
        <button class="bg-blue-700 mx-auto hover:bg-blue-600 mt-4 text-white text-sm px-4 py-2 w-3/5">
          Register
        </button>
  
      </div>
</div>