Portfolio
Design

Design

Overview

Let's design our Portfolio!

Goal

State of the art

Basic concepts

Practice

Try to modify the text Hello from VisionAcademy

Docs

Text color

Utilities for controlling the text color of an element.

Class
Result
text-purple-50
Aa
text-purple-100
Aa
text-purple-200
Aa
text-purple-300
Aa
text-purple-400
Aa
text-purple-500
Aa
text-purple-600
Aa
text-purple-700
Aa
text-purple-800
Aa
text-purple-900
Aa
text-red-50
Aa
text-red-100
Aa
text-red-200
Aa
text-red-300
Aa
text-red-400
Aa
text-red-500
Aa
text-red-600
Aa
text-red-700
Aa
text-red-800
Aa
text-red-900
Aa
text-orange-50
Aa
text-orange-100
Aa
text-orange-200
Aa
text-orange-300
Aa
text-orange-400
Aa
text-orange-500
Aa
text-orange-600
Aa
text-orange-700
Aa
text-orange-800
Aa
text-orange-900
Aa
text-green-50
Aa
text-green-100
Aa
text-green-200
Aa
text-green-300
Aa
text-green-400
Aa
text-green-500
Aa
text-green-600
Aa
text-green-700
Aa
text-green-800
Aa
text-green-900
Aa
text-blue-50
Aa
text-blue-100
Aa
text-blue-200
Aa
text-blue-300
Aa
text-blue-400
Aa
text-blue-500
Aa
text-blue-600
Aa
text-blue-700
Aa
text-blue-800
Aa
text-blue-900
Aa
text-gray-50
Aa
text-gray-100
Aa
text-gray-200
Aa
text-gray-300
Aa
text-gray-400
Aa
text-gray-500
Aa
text-gray-600
Aa
text-gray-700
Aa
text-gray-800
Aa
text-gray-900
Aa
text-black
Aa
text-white
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Font Size

Utilities for controlling the font size of an element.

Class
Result
text-xs
Aa
text-sm
Aa
text-base
Aa
text-lg
Aa
text-xl
Aa
text-2xl
Aa
text-3xl
Aa
text-4xl
Aa
text-5xl
Aa
text-6xl
Aa
text-7xl
Aa
text-8xl
Aa
text-9xl
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Font Weight

Utilities for controlling the font weight of an element.

Class
Result
font-thin
Aa
font-extralight
Aa
font-light
Aa
font-normal
Aa
font-medium
Aa
font-semibold
Aa
font-bold
Aa
font-extrabold
Aa
font-black
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Border Width

Utilities for controlling the width of an element's borders.

Class
Result
border-0
Aa
border
Aa
border-2
Aa
border-4
Aa
border-8
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Border Color

Utilities for controlling the color of an element's borders.

Class
Result
border-purple-50
Aa
border-purple-100
Aa
border-purple-200
Aa
border-purple-300
Aa
border-purple-400
Aa
border-purple-500
Aa
border-purple-600
Aa
border-purple-700
Aa
border-purple-800
Aa
border-purple-900
Aa
border-red-50
Aa
border-red-100
Aa
border-red-200
Aa
border-red-300
Aa
border-red-400
Aa
border-red-500
Aa
border-red-600
Aa
border-red-700
Aa
border-red-800
Aa
border-red-900
Aa
border-orange-50
Aa
border-orange-100
Aa
border-orange-200
Aa
border-orange-300
Aa
border-orange-400
Aa
border-orange-500
Aa
border-orange-600
Aa
border-orange-700
Aa
border-orange-800
Aa
border-orange-900
Aa
border-green-50
Aa
border-green-100
Aa
border-green-200
Aa
border-green-300
Aa
border-green-400
Aa
border-green-500
Aa
border-green-600
Aa
border-green-700
Aa
border-green-800
Aa
border-green-900
Aa
border-blue-50
Aa
border-blue-100
Aa
border-blue-200
Aa
border-blue-300
Aa
border-blue-400
Aa
border-blue-500
Aa
border-blue-600
Aa
border-blue-700
Aa
border-blue-800
Aa
border-blue-900
Aa
border-gray-50
Aa
border-gray-100
Aa
border-gray-200
Aa
border-gray-300
Aa
border-gray-400
Aa
border-gray-500
Aa
border-gray-600
Aa
border-gray-700
Aa
border-gray-800
Aa
border-gray-900
Aa
border-black
Aa
border-white
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Border Radius

Utilities for controlling the border radius of an element.

Class
Result
rounded-none
Aa
rounded-sm
Aa
rounded
Aa
rounded-md
Aa
rounded-lg
Aa
rounded-xl
Aa
rounded-2xl
Aa
rounded-3xl
Aa
rounded-full
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Background Color

Utilities for controlling an element's background color.

Class
Result
bg-purple-50
Aa
bg-purple-100
Aa
bg-purple-200
Aa
bg-purple-300
Aa
bg-purple-400
Aa
bg-purple-500
Aa
bg-purple-600
Aa
bg-purple-700
Aa
bg-purple-800
Aa
bg-purple-900
Aa
bg-red-50
Aa
bg-red-100
Aa
bg-red-200
Aa
bg-red-300
Aa
bg-red-400
Aa
bg-red-500
Aa
bg-red-600
Aa
bg-red-700
Aa
bg-red-800
Aa
bg-red-900
Aa
bg-orange-50
Aa
bg-orange-100
Aa
bg-orange-200
Aa
bg-orange-300
Aa
bg-orange-400
Aa
bg-orange-500
Aa
bg-orange-600
Aa
bg-orange-700
Aa
bg-orange-800
Aa
bg-orange-900
Aa
bg-green-50
Aa
bg-green-100
Aa
bg-green-200
Aa
bg-green-300
Aa
bg-green-400
Aa
bg-green-500
Aa
bg-green-600
Aa
bg-green-700
Aa
bg-green-800
Aa
bg-green-900
Aa
bg-blue-50
Aa
bg-blue-100
Aa
bg-blue-200
Aa
bg-blue-300
Aa
bg-blue-400
Aa
bg-blue-500
Aa
bg-blue-600
Aa
bg-blue-700
Aa
bg-blue-800
Aa
bg-blue-900
Aa
bg-gray-50
Aa
bg-gray-100
Aa
bg-gray-200
Aa
bg-gray-300
Aa
bg-gray-400
Aa
bg-gray-500
Aa
bg-gray-600
Aa
bg-gray-700
Aa
bg-gray-800
Aa
bg-gray-900
Aa
bg-black
Aa
bg-white
Aa
bg-transparent
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Padding

Utilities for controlling an element's padding.

Class
Result
p-1
Aa
p-2
Aa
p-3
Aa
p-4
Aa
px-1
Aa
px-2
Aa
px-3
Aa
px-4
Aa
py-1
Aa
py-2
Aa
py-3
Aa
py-4
Aa
pt-3
Aa
pr-3
Aa
pb-3
Aa
pl-3
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Margin

Utilities for controlling an element's margin.

Class
Result
m-1
Aa
m-2
Aa
m-3
Aa
m-4
Aa
mx-1
Aa
mx-2
Aa
mx-3
Aa
mx-4
Aa
my-1
Aa
my-2
Aa
my-3
Aa
my-4
Aa
mt-3
Aa
mr-3
Aa
mb-3
Aa
ml-3
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Display

Utilities for controlling the display box type of an element.

Class
Result
block
Aa
inline
Aa
flex
Aa
grid
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Gap

Utilities for controlling gutters between grid and flexbox items.

Class
Result
gap-0
Aa
gap-1
Aa
gap-2
Aa
gap-3
Aa
gap-4
Aa
gap-5
Aa
gap-6
Aa
gap-7
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Justify Content

Utilities for controlling how flex and grid items are positioned along a container's main axis.

Class
Result
justify-start
Aa
justify-end
Aa
justify-center
Aa
justify-between
Aa
justify-around
Aa
justify-evenly
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Align Items

Utilities for controlling how flex and grid items are positioned along a container's cross axis.

Class
Result
items-start
Aa
items-end
Aa
items-center
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Flex Direction

Utilities for controlling the direction of flex items.

Class
Result
flex-row
Aa
flex-col
Aa

This is only an extract of the Tailwind Official Docs (opens in a new tab)

Project

Exercitation labore sunt sint magna velit commodo occaecat. Incididunt laboris anim pariatur nostrud mollit laborum elit officia excepteur nisi proident. Tempor ea veniam ex consequat cillum dolore commodo. Amet aliqua laborum et ut laboris cillum excepteur deserunt. Ea adipisicing amet fugiat commodo Lorem commodo nulla aliquip irure nisi velit.

Desktop image
Desktop image