0% found this document useful (0 votes)
224 views6 pages

Exercises For TAILWIND CSS

Uploaded by

Youness Boumlik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
224 views6 pages

Exercises For TAILWIND CSS

Uploaded by

Youness Boumlik
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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