DEV Community

loading...
Play Button Pause Button

Easy Tailwind CSS Trick to Create Responsive Websites in 1 Minute

souviktests profile image Souvik Paul Updated on ・1 min read

In this video, I've talked about how you can build and deploy a professional website in just 5 minutes. In this video, I've talked about TailBlocks. It's a project build with Tailwind CSS. It's basically a library of readymade web components created by using Tailwind CSS.

How to use Repl, the online IDE?

Watch: https://youtu.be/6c5T5TiGJk4

Watch more videos:

Now: https://bit.ly/3uDiFUs

Instructions:

--- Build ---

  1. Copy the Tailwind CDN
  2. https://tailwindcss.com/
  3. Paste inside 'HTML head'
  4. Copy component's code
  5. https://tailblocks.cc/
  6. Paste inside 'HTML body'

--- Deploy---

  1. Head over to Netlify and Sign Up.
  2. https://www.netlify.com/
  3. Click on 'Site'
  4. Drag and drop your 'project folder'
  5. Go to 'Deploy' to update your website
  6. Enjoy.

Timestamps:

00:00 - Intro
00:18 - What is Tailblocks?
00:27 - Step 1: Create a New Project
00:43 - Step 2: Add the CDN
00:55 - Step 3: Pick a Web Component
01:10 - Step 4: Commit your changes
01:22 - Step 5: Deploy
02:03 - Outro
02:11 - Disclaimer

Thank you for watching :)

Watch my other videos:

Screenshot Hack: https://youtu.be/XPd2PtHpKnE
Internet of Things: https://youtu.be/ktrY7jSkyOU
Best Image API: https://youtu.be/exONWV2Y3hQ
Remove Bg: https://youtu.be/ittFg7dZmcQ

Let's talk:

Instagram: https://instagram.com/amisouvikpaul
Twitter: https://twitter.com/thesouvikpaul
Facebook: https://fb.com/thesouvikpaul
FB Page: https://fb.com/amisouvikpaul

Thank you for reading.

Discussion (1)

Collapse
moopet profile image
Ben Sinclair
img {
  max-width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

If you write HTML, that'll do you well for everything except tables.

Forem Open with the Forem app