First Steps in Tailwind

[rico41]

Hello,

today i tried my first steps in tailwind.
i tried to write a layout similar to hubspot, i thought it will be the easiest way for the first try.

my problem is i cant set the main container next to the side menu, i tried it with flex but then i the whole width is damaged.

Can you help me please?

`

<nav class="bg-gray-700 border-black shadow-md "> 
    <div class="flex items-center ">
        <a class="flex" href="#">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
            </svg>    
            <div class="flex px-3 text-2xl font-normal text-gray-900">
                <span class="text-white"></span>
                <span class="m-1 text-sm text-white "></span>
            </div>
        </a>
        <div class="flex w-full space-x-1">                
                <a class="px-3 py-4 text-white" href="#">Contacts</a>                                
                <a class="px-3 py-4 text-white" href="#">Conversation</a>                            
                <a class="px-3 py-4 text-white" href="#">Marketing</a>            
                <a class="px-3 py-4 text-white" href="#">Sales</a> 
                <a class="px-3 py-4 text-white" href="#">Service</a>            
            </div>        
    </div>    
</nav>
<!-- side menu-->
<div class="">
    <div class="row-span-3 mx-8">       
        <a href="#" class="text-sm text-blue-900"> -> Contacts</a>
        <div class="flex items-center w-1/4 px-3 bg-white border-2 rounded-2xl">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-16 h-16" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10l-2 1m0 0l-2-1m2 1v2.5M20 7l-2 1m2-1l-2-1m2 1v2.5M14 4l-2-1-2 1M4 7l2-1M4 7l2 1M4 7v2.5M12 21l-2-1m2 1l2-1m-2 1v-2.5M6 18l-2-1v-2.5M18 18l2-1v-2.5" />
                </svg>             
                <div class="flex flex-col mx-3">
                    <span class="text-xl"> John Doe</span>
                    <span class="text-sm text-gray-400">Doe LTD</span>
                </div>           
        </div>       
       <div class="w-1/4 py-4 mt-5 bg-white border-2 rounded-2xl ">
            <p class="mx-3">About John Doe</p>
            <div class="mx-5 my-2 text-sm text-gray-500">
            <label for="name" class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">First Name</label>
            <input type="text" placeholder="John" class="block w-full mb-3 border rounded appearance-none bg-grey-lighter text-grey-darker border-red">            
        
            <label for="name" class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">Last Name</label>
            <input type="text" placeholder="Doe" class="block w-full mb-3 border rounded appearance-none bg-grey-lighter text-grey-darker border-red">            
        
            <label for="name" class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">Email</label>
            <input type="text" placeholder="john@doe.com" class="block w-full mb-3 border rounded appearance-none bg-grey-lighter text-grey-darker border-red">            
        
            <label for="name" class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">Telephon</label>
            <input type="text" placeholder="141245365" class="block w-full mb-3 border rounded appearance-none bg-grey-lighter text-grey-darker border-red">            
        
            <label for="name" class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">Contact</label>
            <input type="text" placeholder="Doe John" class="block w-full mb-3 border rounded appearance-none bg-grey-lighter text-grey-darker border-red">  
        
            <div class="flex-wrap py-3">
                <a href="#" class="px-3 py-2 text-white bg-gray-500 rounded-lg">All Details</a> 
            </div>   
        </div>    
      </div>
      
      <div class="w-1/4 py-4 mt-5 bg-white border-2 rounded-2xl ">            
        <p class="mx-3 mb-3">Offers</p>
        <div class="flex justify-between mx-5 mt-1 text-gray-500">
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">OF-0023</span>
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">23.02.2021</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 font-semibold text-green-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
        </div>
        <div class="flex justify-between mx-5 mt-1 text-gray-500">
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">OF-0024</span>
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">23.02.2021</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 font-semibold text-yellow-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
           </svg>
        </div>
        <div class="flex justify-between mx-5 mt-1 text-gray-500">
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">OF-0025</span>
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">23.02.2021</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 font-semibold text-red-600 rounded-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
        </div>             
    </div>  
    <div class="w-1/4 py-4 mt-5 bg-white border-2 rounded-2xl">
        <p class="mx-3 mb-3">Contracts</p>
        <div class="flex justify-between mx-5 mt-1 text-gray-500">
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">C-0023</span>
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">23.02.2021</span>
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 font-semibold text-green-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
              </svg>
        </div>
        <div class="flex justify-between mx-5 mt-1 text-gray-500">
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">C-0024</span>
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">23.02.2021</span>
            
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 font-semibold text-yellow-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"></path>
              </svg>
        </div>
        <div class="flex justify-between mx-5 mt-1 text-gray-500">
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">C-0025</span>
            <span class="block mb-2 text-xs font-bold tracking-wide uppercase text-grey-darker">23.02.2021</span>                
            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 font-semibold text-red-600 rounded-full" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
        </div>             
    </div>
    </div>
    <!-- Main-->
    <div class="w-3/5 bg-white">
        <nav class="flex flex-col sm:flex-row">
            
            <button class="block px-6 py-4 font-medium text-gray-600 border-b-2 border-blue-500 active:text-blue-500 hover:text-blue-500 focus:outline-none"><svg xmlns="http://www.w3.org/2000/svg" class="flex w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
              </svg>
                Notice
            </button>
            <button class="block px-6 py-4 text-gray-600 hover:text-blue-500 focus:outline-none"><svg xmlns="http://www.w3.org/2000/svg" class="flex w-6 h-6 items" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
              </svg>
                E-Mail
            </button>
            <button class="block px-6 py-4 text-gray-600 hover:text-blue-500 focus:outline-none"><svg xmlns="http://www.w3.org/2000/svg" class="flex w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
              </svg>
                Call
            </button>
            <button class="block px-6 py-4 text-gray-600 hover:text-blue-500 focus:outline-none"><svg xmlns="http://www.w3.org/2000/svg" class="flex w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
              </svg>
                To-Do
            </button>
        </nav>
        <main class="container p-3">
            <div id="notice" >
            <textarea class="w-full h-24 border rounded-md resize-none " placeholder="Write here..."></textarea>                
            </div>
        </main>
    </div>
    
</div>

`

[simonswiss]

Hey!

Do you have a design/screenshot of how you want the thing to look?

I removed all the w-1/4 classes which would make the elements only 25% of the available width, and added a flex class on the wrapper that contains both the sidebar and main sections:

That is definitely not a finished setup, but I think this should get you going. Here's a link to a Tailwind Play demo:

https://play.tailwindcss.com/j9z6XmD5PW

[rico41]

hi, thank you very much :)

here is the screenshot from the hubspot layout

[rico41]

@simonswiss
hello, can you tell me how i can set the next div under the tab area for the timeline, please?

like on the screen above
https://play.tailwindcss.com/W0t2rmoDpk