TalwindFormInline

@extends('layouts.app')
@section('main')
  <form>
    <div class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col my-2 " style="margin-right: 5%;margin-left: 5%">
        <div class="-mx-3 md:flex mb-0">
            <div class="md:w-1/4 px-3 mb-6 md:mb-0">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
                       for="id">id</label>
                <input class="appearance-none block uppercase
                              text-transform:uppercase w-full bg-grey-lighter
                              text-grey-darker border border-red rounded py-3 px-4 mb-3"
                       id="id"
                       type="number"
                       placeholder=""
                       disabled>
            </div>

            <div class="md:w-full px-3">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
                       for="m001razao">Nome razão social da empresa
                </label>
                <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border
                              border-grey-lighter rounded py-3 px-4"
                       id="m001razao"
                       type="text"
                       placeholder="">
            </div>
        </div>

        <div class="-mx-3 md:flex mb-4">
            <div class="md:w-full px-3">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
                       for="m001razao">Apelido/ Fantasia
                </label>
                <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border
                              border-grey-lighter rounded py-3 px-4"
                       id="m001razao"
                       type="text"
                       placeholder="">
            </div>

            <div class="md:w-full px-3">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
                       for="m001razao">CNPJ
                </label>
                <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border
                              border-grey-lighter rounded py-3 px-4"
                       id="m001razao"
                       type="text"
                       placeholder="">
            </div>

            <div class="md:w-full px-3">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2"
                       for="m001razao">IE
                </label>
                <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border
                              border-grey-lighter rounded py-3 px-4"
                       id="m001razao"
                       type="text"
                       placeholder="">
            </div>
        </div>



        <div class="-mx-3 md:flex mb-6">
            <div class="md:w-full px-3">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-password">
                    Password
                </label>
                <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4 mb-3" id="grid-password" type="password" placeholder="******************">
                <p class="text-grey-dark text-xs italic">Make it as long and as crazy as you'd like</p>
            </div>
        </div>
        <div class="-mx-3 md:flex mb-2">
            <div class="md:w-1/2 px-3 mb-6 md:mb-0">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-city">
                    City
                </label>
                <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-city" type="text" placeholder="Albuquerque">
            </div>
            <div class="md:w-1/2 px-3">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-state">
                    State
                </label>
                <div class="relative">
                    <select class="block appearance-none w-full bg-grey-lighter border border-grey-lighter text-grey-darker py-3 px-4 pr-8 rounded" id="grid-state">
                        <option>New Mexico</option>
                        <option>Missouri</option>
                        <option>Texas</option>
                    </select>
                    <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-grey-darker">
                        <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
                            <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
                    </div>
                </div>
            </div>
            <div class="md:w-1/2 px-3">
                <label class="block uppercase tracking-wide text-grey-darker text-xs font-bold mb-2" for="grid-zip">
                    Zip
                </label>
                <input class="appearance-none block w-full bg-grey-lighter text-grey-darker border border-grey-lighter rounded py-3 px-4" id="grid-zip" type="text" placeholder="90210">
            </div>
        </div>
    </div>
  </form>
    @endsection