Scribd
Upload
93 views

Exercises For TAILWIND CSS

Uploaded by

Youness Boumlik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
93 views

Exercises For TAILWIND CSS

Uploaded by

Youness Boumlik
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 6

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>

You might also like