Build a travel site with Tailwind CSS Navigation & Hero

In this lesson, we are going to be building the main navigation and hero section.

The final result will look like:

You can pick up where we last left off, by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for the previous article is 1-installing-tailwind-css and that is also where we will begin this lesson from.

#tailwind css #css

What is GEEK

Buddha Community

Build a travel site with Tailwind CSS Navigation & Hero

In this lesson, we are going to be building the main navigation and hero section.

The final result will look like:

You can pick up where we last left off, by clicking the bookmark below. Each section of the tutorial is within its own branch. The branch for the previous article is 1-installing-tailwind-css and that is also where we will begin this lesson from.

#tailwind css #css

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

Building a Photo Gallery With CSS Grid and Tailwind CSS

Building a photo gallery has been a tough nut to crack for so many years. Throughout my career, I’ve used <table> layouts, <div>s with brittle margins and set widths, and tried my hand at flexbox. While all of these methods have worked, none of them felt like that silver bullet solution.

Then one day, the CSS gods bestowed upon us the magical power of CSS grids. Now, making a grid-based layout is an absolute delight. And, when we use grids with Tailwind CSS, we can create beautiful, functional UIs in a fraction of the time it used to take. So, let’s hop right in and see how we can use them to make a photo gallery.

• The Set-Up
• Our HTML
• Layouts With CSS Grid
• Mobile Layout
• Styling With Tailwind CSS
• The Wrap-Up

#tailwind css #css grid #css

How To Build an About Me Page With Laravel Sail and Tailwind CSS

Introduction

Laravel Sail is a Docker development environment included by default in Laravel since version 8. It allows you to quickly get a PHP development environment up and running, tailored for running Laravel applications with built-in support for NPM / Node.

In this guide, you’ll bootstrap a new Laravel application with Laravel Sail and create a styled “about me” landing page using Tailwind CSS, a utility-first CSS framework designed for rapidly building custom user interfaces. At the end, you’ll have a base that you can use to further develop a Laravel application using Tailwind CSS for the front end and Sail for the development environment.

Prerequisites

Although the code shared in this guide should work seamlessly across multiple environments and systems, the instructions explained here were tested within an Ubuntu 20.04 local system running Docker and Docker Compose. Regardless of your base operating system, here’s what you’ll need to set up in order to get started:

• Docker installed on your local machine. If you’re running Ubuntu 20.04, you can follow Steps 1 and 2 of How To Install and Use Docker on Ubuntu 20.04 to set it up. Windows and MacOS users need to install Docker Desktop instead.

• Docker Compose installed on your local machine. Docker Compose comes included by default with Docker Desktop for both Windows and MacOS systems, but Linux users need to install the Compose executable, following Step 1 of How To Install and Use Docker Compose on Ubuntu 20.04.

• A code editor for PHP (optional). A code editor helps making code easier to read and to format, and can improve your productivity by pointing out issues before you execute your code. You can follow our guide on How To Set Up Visual Studio Code for PHP Projects to set up VSCode, a free code editor, within your local development environment.

• Step 1 — Creating a New Laravel Application Using the Laravel Builder Script

• Step 2 — Using Laravel Sail

• Step 3 — Setting Up Tailwind CSS with Laravel

• Step 4 — Creating a Landing Page

• Step 5 — Styling Your Landing Page with Tailwind CSS

#tailwind css #laravel #css #tailwind

How to Build a Responsive Timeline Design using Tailwind CSS

Build a completely responsive timeline design with Tailwind CSS. Learn about the useful Tailwind utilities, customizing the framework, responsive design using Tailwind, extracting classes using @apply directive and so much more.

Starter Template GitHub Repository: https://github.com/ThirusOfficial/tailwind-css-starter-postcss

Source Code: https://github.com/ThirusOfficial/reponsive-timeline-tailwind-css

#CSS #Tailwind CSS #Tailwind

#tailwind css #css #tailwind