Building Static Landing Page with Nextjs, Typescript and Tailwind CSS

Creativity Animated Landing Page

Landing Page created with Nextjs, Typescript and Tailwind CSS

Demo

Static landing page can be configure

Usage

DemoMake sure you have [nodejs](https://nodejs.org/en/) installed. Support responsive only wide and laptop and sizes

Just run the following command

npm install

Run project:

npm run dev or yarn dev

Please feel free to reach me ❤️

Download details:
Author: Semcester
Source code: https://github.com/Semcester/Creativity
License:

#next #nextjs #react #javascript

What is GEEK

Buddha Community

How To Create A Stylish Email Capture Page In Tailwind CSS

Ah the classic email capture page. Just like chocolate, it’s a flavor that we all need it at some point. So it’s good to have some options ready to go when that does happen.

For this tutorial we will be building out a simple email capture page with Next.js and TailwindCSS.

If you just want to skip to the final code you can find that here.

Setup

We will start by cloning the official Next.js + TailwindCSS example repo. This will make getting setup much easier. You can find this repo here.

You can follow the instructions in the ReadMe or just run the following command locally (I am using Yarn but you can switch to npm if you prefer):

yarn create next-app --example with-tailwindcss with-tailwindcss-app

This will pull down the example to your local drive in a folder called with-tailwindcss-app. You can rename it however you like and link it to your own Github repo (comes in handy when you want to deploy).

Start Your Engines

Run the following command to start up our app:

yarn

Cleanup

Best to start with an empty slate. Let’s go in and clear out all of the divs in the return statement of index.js (our main page). You can leave the Head part in if you want (this only impacts SEO/ what the title will be in the tab).

Add Background Image

We want a full screen background image. For this we will make our main tag relative and then absolutely position our image to cover the whole space. For the image I will use the awesome Unsplash Random API (also makes it more fun with images changing on every refresh). You can change this to whichever image url you want.

<main className='relative h-screen w-screen'>
 <img
  src='https://source.unsplash.com/random'
  alt='main background image'
  className='absolute inset-0 w-full h-full object-cover'
 />
</main>

Alright so now we have an image covering our page.

Add Hero Content

Let’s add in our content now. Keeping it simple we want a headline, a supporting paragraph and a call to action. Our call to action will be a email subscription form.

Let’s create a new component called HeroContent for this.

<div className='absolute inset-0 flex justify-center items-center'
 <div className='w-full max-w-md'
  <h1 className='text-center text-3xl sm:text-4xl font-extrabold      
    sm:leading-[3rem]'>
    Your headline here.{' '}
    <span className='text-yellow-400'>Catch their attention!</span
  </h1>
  <p className='mt-6 text-lg sm:text-xl'>
   Ea esse minim reprehenderit voluptate. Ea nisi culpa magna...
  </p>
 </div>
</div>

We used position absolute to span the whole div. Then we used flex to center the div containing our content. We restricted it’s width with a max-w-md class.

For formatting we added some classes to make our text bigger and added a little color to make the headline more catchy. :D

#nextjs #web-design #tailwind-css #landing-pages #css

Design A Landing Page using Tailwind CSS

When I started learning how to use the Tailwind CSS library, I really didn’t know what to expect and wasn’t quite sure how I’d fare with the library. It turns out, TailWind’s a whole lot easier to use than I thought and makes designing a landing page a breeze.

One remarkable feature I noticed was the ease with which I could define classes for various responsive breakpoints without writing a single line of CSS media queries. That for me was awesome!

For this tutorial, I’ll assume you have a Tailwind project set up, if you don’t you can grab one here. For the fonts, I’m using Poppins. All the code presented here should be placed in your body tag.

We’ll start off with creating and styling the main element that would house the hero section:

<main class="h-full flex items-center px-6 lg:px-32 bg-purple-900 text-white">

</main>

The Tailwind classes added to the main element does the following:

1. h-full: Give the main element a height of 100%. Pretty much like what you’d do with a style declaration of height: 100vh in CSS.
2. flex: Make the main element a flexbox, just like you would with a style declaration like display: flex in CSS.
3. items-center: Position the contents of the main element in the center of the main element, just like you would with align-items: center in CSS.
4. px-6 lg:px-32: Assign horizontal padding of 1.5rem to all devices from mobile to medium and horizontal padding of 8rem for devices from large to devices beyond. You can add as many other breakpoints to suit your design needs, this is the wonderful thing about Tailwind.
5. bg-purple-900: Gives the main element a purple background with an opacity of 90%. This is equivalent to background-color: purple in CSS.
6. text-white: Gives the main section and its child elements a default white color (#FFFFFF).

#tailwind #design #tailwind-css #web #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

Build Dynamic Landing Pages with Next.js, Tailwind CSS and DatoCMS

Build a Dynamic Course Landing Page with Next.js, Tailwind CSS, and DatoCMS

Build a fully dynamic course landing page with some of my favorite technologies: Next.js, Tailwind CSS, and DatoCMS. We will use DatoCMS as a Headless CMS to host all of our content. In doing so, we'll explore how to handle data modeling, create custom components, etc. Then, we'll pull all of that content into a Next.js project using GraphQL, and style it up with Tailwind CSS.

#nextjs #tailwind #tailwindcss #css #webdev #cms 

 

Build a Pokedex with NextJS and Tailwind CSS - SSR vs SSG

NextJS is a powerful framework built on top of React that allows you to easily mix Static Pages and Server Side Rendered pages. In this video, we’ll use NextJS to build a cool Pokedex using the Pokemon API. The index page will be a statically generated page while the Pokemon details pages will be server-side rendered. We’ll also use Tailwind CSS for styling the app.

Source Code - https://github.com/jamesqquick/nextjs…

Setting up Tailwind in Nextjs - https://dev.to/notrab/get-up-and-runn…

#nextjs #tailwind css #css