Exercise for Tailwind
Exercise 1 - Used to with documentation
● Copy this boilerplate code and complete all of these tasks.
● After completing each task check the checkbox.
● This exercise will make you familiar with the documentation.
Code boilerplate :
<div>
<h1>Tailwind CSS ❤</h1>
<p>
Tailwind CSS is basically a utility-first CSS framework for
rapidly building custom user interfaces. It is a highly
customizable, low-level CSS framework that gives you all of the
building blocks you need to build bespoke designs.
</p>
</div>
Tasks for Heading(h1) :
● Font size = 1.875rem
● Font weight = Bold(700)
Tasks for Paragraph (p):
● Font weight = Medium(500)
● Font size = 1.125rem
● Line height = 1.5rem
● Text color = gray-800
Tasks for Div :
● Width = 50%
● Margin & Padding = 1.5rem
● Background Color = purple-100
● Border radius = 0.75rem
1
Exercise for Tailwind
● Box Shadow = Medium
● Border Top = 2px
● Border color = purple-900
Output :
Exercise 2 - Advance concepts (Effects,
Responsive Design, Dark mode and other
concept)
● Copy this boilerplate code and complete all of these tasks.
● After completing each task check the checkbox.
● This exercise will clear some advanced concepts of Tailwind:)
Code boilerplate :
2
Exercise for Tailwind
<main class="m-4">
<img src="https://cdn.wallpapersafari.com/21/76/v26KTO.jpg" alt="RDJ"
class="rounded-2xl transition-all duration-200" />
<section>
<p class="font-bold my-3">Robert Downey Jr. is an American actor and
producer. His career
has been characterized by critical and popular success in his youth,
followed by a period of substance abuse and
legal troubles, before a resurgence of commercial success later in his
career.</p>
<button class="bg-black text-yellow-300 py-2 px-4 rounded-md font-
bold transition-all duration-300">Visit
Instagram</button>
</section>
</main>
Tasks for Main (main) :
● Display Flex for “640px and larger than that”
● Flex-direction to Row for “640px and larger than that”
● Align-items to center for “640px and larger than that”
Tasks for Image (img) :
● Width 15rem for “640px and larger than that”
● Height 18rem for “640px and larger than that”
● Apply class scale-110 for “hover effect”
Tasks for Section (section) :
● Margin left and right both to 1.25rem(20px) for “640px and larger than that”
Tasks for Paragraph (p) :
● Font size to 1.125rem(18px) for “768px and larger than that”
3
Exercise for Tailwind
● Font size to 1.5rem(24px) for “1024px and larger than that”
● Change font color to White for “Dark Mode”
Tasks for Button (button) :
● Font size to 1.125rem(18px) for “640px and larger than that”
● Font size to 1.5rem(24px) for “1024px and larger than that”
● Change background color to yellow-300 for “Dark Mode”
● Change font color to black for “Dark Mode”
● Change background color yellow-300 on “Hover” only for “640px and larger
than that”
● Change font color to black on “Hover” only for “640px and larger than that”
Output for Small Devices :
Output for Large Devices :
4
Exercise for Tailwind
Solutions
Exercise 1 :
<div class="w-1/2 bg-purple-100 m-6 p-6 rounded-xl shadow-md
border-t-2 border-purple-900">
<h1 class="text-3xl font-bold">Tailwind CSS ❤</h1>
<p class="leading-6 font-medium mt-3 text-gray-800 text-lg">
Tailwind CSS is basically a utility-first CSS framework for
rapidly building custom user interfaces. It is a highly
customizable, low-level CSS framework that gives you all of the
building blocks you need to build bespoke designs.
</p>
</div>
Exercise 2 :
<main class="m-4 sm:flex sm:flex-row sm:items-center">
<img src="https://cdn.wallpapersafari.com/21/76/v26KTO.jpg"
alt="RDJ"
5
Exercise for Tailwind
class="rounded-2xl transition-all duration-200 sm:w-60 sm:h-72
hover:scale-110" />
<section class="sm:mx-5">
<p class="font-bold my-3 md:text-lg lg:text-2xl dark:text-
white">Robert Downey Jr. is an American actor and
producer. His career
has been characterized by critical and popular success in his youth,
followed by a period of substance abuse and
legal troubles, before a resurgence of commercial success later in
his career.</p>
<button
class="bg-black text-yellow-300 py-2 px-4 rounded-md font-bold
transition-all duration-300 sm:text-lg lg:text-2xl dark:bg-yellow-300
dark:text-black sm:hover:bg-yellow-300 md:hover:text-black">Visit
Instagram</button>
</section>
</main>
