Using Tailwind CSS Create Responsive App

Tailwind css

Design Interview Question to create responsive two column app layout

In Software Engineer Interview, you might be asked to design different app, layout, website. It is very useful to learn and know about the modern, cutting edge technology. Even you are not able to finish code or design, you can still show your knowledge and interest in new technology.

With Tailwind CSS, you can Rapidly build modern websites without ever leaving your HTML. Also, you can use it with any latest library or framework like React, NextJs, VueJs.

Tailwind CSS

You have given specific layout and your task is to create layout using cutting edge technology.

Tailwind CSS is utility first framework where you can build design quickly with great user experience. Tailwind CSS provides so many built in functionality and you can use those built in classes for UI component.

It is cross browser friendly and works across the devices using its media scale.

Now lets, start with tailwind css you can use grid or flex to create the layout. We will use flex as it provides better performance over grid layout.

First Step is to create HTML Schema:

<div>
  <!--Col1-->
  <div></div>
  <!--Col2-->
  <div></div>
</div>


Please Checkout Our Step By Step Guide to Create Responsive App Using Tailwind CSS

Now we can apply the flex class to container div and flex-1 to column divs.

<div class="flex">
  <!--Col1-->
  <div class="flex1"></div>
  <!--Col2-->
  <div class="flex-1"></div>
</div>

Read More on Interview Prep Guide:

Most Frequently asked interview questions and answers.

Now, You can provide background and other designing factors to the app. On large devices you can use flex-auto, flex-col classes to make it better with rich user experience.

Checkout this Tailwind CSS website to learn more about it and how to utilize it for your own project.