To create a drawer in the footer using Tailwind CSS

To create a drawer in the footer using Tailwind CSS, you can make a sliding drawer that appears from the bottom of the screen when a button is clicked. Here's how you can create a footer drawer that slides up:

HTML & Tailwind CSS Example for Footer Drawer

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Footer Drawer with Tailwind CSS</title>
  <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.0.6/dist/cdn.min.js" defer></script>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">

  <!-- Main Content -->
  <div class="p-4">
    <h1 class="text-2xl mb-4">Main Content</h1>
    <p>This is the main content area. Click the button below to open the footer drawer.</p>
    <button @click="open = true" class="mt-4 px-4 py-2 bg-blue-500 text-white rounded">
      Open Footer Drawer
    </button>
  </div>

  <!-- Footer Drawer -->
  <div x-data="{ open: false }">
    <!-- Backdrop -->
    <div 
      x-show="open" 
      class="fixed inset-0 bg-black bg-opacity-50 z-40"
      @click="open = false"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="opacity-0"
      x-transition:enter-end="opacity-100"
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="opacity-100"
      x-transition:leave-end="opacity-0"
    ></div>

    <!-- Drawer Content -->
    <div
      class="fixed bottom-0 left-0 w-full bg-white z-50 transform translate-y-full transition-transform"
      :class="{ 'translate-y-0': open, 'translate-y-full': !open }"
      x-transition:enter="transition ease-out duration-300"
      x-transition:enter-start="translate-y-full"
      x-transition:enter-end="translate-y-0"
      x-transition:leave="transition ease-in duration-300"
      x-transition:leave-start="translate-y-0"
      x-transition:leave-end="translate-y-full"
    >
      <!-- Drawer Header -->
      <div class="p-4 bg-gray-800 text-white flex justify-between">
        <h2 class="text-lg">Footer Drawer</h2>
        <button @click="open = false" class="text-white">Close</button>
      </div>

      <!-- Drawer Body -->
      <div class="p-4">
        <p>This is the footer drawer content. You can put any information or links here.</p>
        <ul>
          <li class="py-2"><a href="#" class="text-blue-500">Link 1</a></li>
          <li class="py-2"><a href="#" class="text-blue-500">Link 2</a></li>
          <li class="py-2"><a href="#" class="text-blue-500">Link 3</a></li>
        </ul>
      </div>
    </div>
  </div>

</body>
</html>

Explanation:

  1. Drawer Positioning:

    • The drawer is positioned at the bottom of the screen using the classes fixed bottom-0 left-0 w-full, which makes it span the full width and stick to the bottom of the viewport.
    • By default, it is hidden by using the class translate-y-full, which pushes it completely off the screen vertically. When the drawer is opened, translate-y-0 is applied to bring it into view.

  2. Backdrop:

    • When the drawer is open, a semi-transparent backdrop (bg-black bg-opacity-50) appears, allowing users to click outside the drawer to close it. The backdrop is hidden or shown using the x-show directive in Alpine.js.

  3. Transitions:

    • Smooth sliding animations are handled using Tailwind's transition-transform utility. The drawer slides up and down with ease-in and ease-out transitions for a smooth user experience.

  4. Alpine.js Interaction:

    • The x-data="{ open: false }" initializes the state variable open to control the drawer’s visibility. When the "Open Footer Drawer" button is clicked, the open variable is set to true, and the drawer slides up into view.
    • Clicking the close button or the backdrop sets open to false, hiding the drawer again.

Customization Options:

  • Drawer Height: Adjust the height of the drawer by modifying the height class (h-64, h-72, etc.) or setting a custom height in the drawer content <div>.
  • Position: If you want a smaller drawer or need the drawer to cover less of the screen, adjust the height accordingly.
  • Content: You can add more content like forms, additional navigation, or social media links to the footer drawer.

This setup provides a clean and responsive footer drawer using Tailwind CSS and Alpine.js, with smooth transitions and simple interactivity.

댓글

댓글 쓰기

이 블로그의 인기 게시물

Using the MinIO API via curl

Using the MinIO API via curl is straightforward, as MinIO is compatible with Amazon S3 API, so most commands follow a similar syntax. Here’s a guide on how to use curl with the MinIO API for some common operations like uploading, downloading, and managing objects. Prerequisites Access Key and Secret Key : Obtain your MinIO Access Key and Secret Key. MinIO Endpoint : Know your MinIO server endpoint, e.g., http://localhost:9000 . Bucket : You may need an existing bucket name, or create a new one using the commands below. Authentication Header For requests to work with MinIO, you need to include authentication in the headers. MinIO uses AWS Signature Version 4 for signing requests. Common Examples 1. List Buckets To list all buckets in your MinIO account, use: curl -X GET \ - -url "http://localhost:9000/" \ - H "Authorization: AWS <AccessKey>:<Signature>" 2. Create a Bucket To create a new bucket, use: curl -X PUT \ - -url "htt...
자세한 내용 보기

How to split a list into chunks of 100 items in JavaScript, 자바스크립트 리스트 쪼개기

To split a list into chunks of 100 items in JavaScript, you can create a function that loops through the list and slices it into smaller subarrays of size 100. Here’s how you can do it: Example Code: function splitListBy100( array ) { const chunkSize = 100 ; const result = []; for ( let i = 0 ; i < array .length; i += chunkSize) { result .push( array .slice(i, i + chunkSize)); } return result ; } // Example usage: const myArray = [... Array ( 350 ).keys()]; // Creating an array of numbers from 0 to 349 const chunks = splitListBy100(myArray); console.log(chunks); Explanation: chunkSize : Defines the size of each chunk, which in this case is 100. for loop : Iterates over the array, incrementing the index by 100 each time. array.slice(i, i + chunkSize) : Extracts a chunk from the array starting from index i and ending at i + chunkSize . result.push() : Adds the chunk to the result array. The function returns an array of arrays (...
자세한 내용 보기

HTML Inline divisions at one row by Tailwind

To arrange a **variable number of inline ` ` elements in a row** using **Tailwind CSS**, you can utilize several approaches, depending on your layout needs. Below are some common methods to align multiple divs in a row: ### 1. **Using Flexbox (`flex`)** Tailwind's `flex` utilities provide a straightforward way to align a variable number of ` ` elements inline in a row. Flexbox will ensure that they stay in a row, wrapping if necessary. #### **Example Using Flexbox** ```html Div 1 Div 2 Div 3 Div 4 ``` #### **Explanation:** - `flex`: Puts the child elements (the divs) in a row. - `flex-wrap`: Ensures that if there are too many divs to fit in one row, they will wrap to the next line. - `space-x-4`: Adds horizontal spacing between the divs (adjust as needed). ### 2. **Using Grid (`grid`)** Another way to align divs in a row is by using Tailwind's `grid` utilities. Grid layouts are very flexible and allow control over the number of columns. #### **Example Using ...
자세한 내용 보기

Boilerplate for typescript server programing

Here are some recommended boilerplates and frameworks for TypeScript server programming, depending on your requirements: 1. NestJS (Highly Recommended for Enterprise-Grade Applications) NestJS is a progressive Node.js framework built with TypeScript. It provides an opinionated structure and is excellent for building scalable and maintainable server-side applications. Features : Dependency injection Modular architecture Built-in support for WebSockets, GraphQL, REST APIs Easy integration with tools like Swagger, TypeORM, and Mongoose Getting Started : Install Nest CLI: npm i -g @nestjs/cli nest new project-name Boilerplate is automatically generated with ready-to-use configurations for controllers, services, and modules. Website : https://nestjs.com/ 2. Express with TypeScript Express.js is lightweight and minimal, making it ideal for developers who prefer flexibility over opinionated frameworks. Boilerplate : You can start with an official or community-maintai...
자세한 내용 보기

가속도 & 속도

F = ma 에서 가속도(( a ))는 속도(( v ))의 시간(( t ))에 대한 미분이므로, 수식으로 표현하면 다음과 같습니다. \[a = \frac{dv}{dt}\] 또한, 속도(( v ))는 위치(( x ))의 시간 미분이므로, 이를 포함하여 가속도를 표현하면 \[a = \frac{d}{dt} \left( \frac{dx}{dt} \right) = \frac{d^2 x}{dt^2}\] 즉, 가속도는 위치의 이阶 미분(두 번째 미분)입니다.
자세한 내용 보기

Gradle multi-module project

In a Gradle multi-module project , it's common to define shared dependencies in the parent project (root project) to avoid duplication across modules. This structure allows child modules to inherit or access those dependencies. Below are some best practices on how to correctly share dependencies between parent and child modules in a multi-module Gradle project . Project Structure Example multi-module-project/ ├── build .gradle .kts (Parent/root project) ├── settings .gradle .kts ├── module-a/ │ └── build .gradle .kts ├── module-b/ │ └── build .gradle .kts Step 1: Configure settings.gradle.kts In a multi-module project, the settings.gradle.kts file should declare all the modules that are part of the build. // settings.gradle.kts rootProject .name = "multi-module-project" // Include child modules include ( "module-a" , "module-b" ) Step 2: Define Shared Dependencies in the Parent build.gradle.kts The root build.gradle.kts ca...
자세한 내용 보기

How to checkout branch of remote git, 깃 리모트 브랜치 체크아웃

To check out a branch from a remote Git repository, you can follow these steps: 1. Fetch the remote branches First, ensure that your local repository is aware of the remote branches by using git fetch . This updates your local references to the remote branches. git fetch origin 2. Check out the remote branch Once the remote branches are fetched, you can check out the desired branch using git checkout -b and specifying the remote branch. Command: git checkout -b < local -branch- name > origin/<remote-branch- name > Explanation: <local-branch-name> : The name you want to give to your local branch. origin/<remote-branch-name> : Refers to the branch on the remote called origin (which is the default name for the main remote repository) and the branch you want to check out. Example: If the remote branch is called feature-branch and you want to create a local branch with the same name, you would run: git checkout -b feature -branch origin / feature -...
자세한 내용 보기

CDPEvents in puppeteer

In Puppeteer , CDPEvents refers to events emitted by the Chrome DevTools Protocol (CDP) . Puppeteer leverages CDP to interact with and control a Chromium-based browser. CDP provides detailed, low-level access to browser internals, such as network traffic, console logs, page lifecycle events, and more. You can listen to these CDP events through Puppeteer’s API to monitor or intercept browser activity. How to Listen for CDP Events in Puppeteer Enable the Required CDP Domain: Some events require enabling a particular domain (e.g., 'Network' , 'Page' , 'Runtime' ). Use page._client() to Access the CDP Session: Although it’s a bit lower-level, Puppeteer allows access to DevTools through the page._client() API. Example: Listening for Network Requests This example demonstrates how to intercept and log network requests using CDP. const puppeteer = require( 'puppeteer' ); ( async () => { const browser = await puppeteer.launch({ headless...
자세한 내용 보기

Sparse encoder

A Sparse Encoder refers to a variant of neural network architectures where sparsity is introduced in the encoding process. This can mean either: Sparse Input Representations : The input features to the encoder are sparse (many values are zero). Sparse Output Representations : The encoder is designed to produce sparse outputs where most of the encoded feature values are zero. Sparse encoders are often used to improve model interpretability, efficiency, and generalization. They can be applied in various contexts, including traditional neural networks, autoencoders, and even transformer-based models. Key Characteristics of Sparse Encoders Sparsity in Representations : The model learns a feature representation where only a subset of neurons is active for a given input. This mimics how biological neurons operate, promoting interpretability and reducing noise in representations. Reduced Computational Cost : Sparse operations often result in lower computational overhead since...
자세한 내용 보기

Reactjs datetime range picker

To create a datetime range picker in React, you can use a library such as react-datetime-range-picker . This library provides a customizable date and time range picker component that you can easily integrate into your React application. Here's an example of how you can use it: Install the library using npm or yarn: npm install react-datetime- range -picker Import the necessary components into your React component: import React, { useState } from 'react' ; import DateTimeRangePicker from 'react-datetime-range-picker' ; Create a state to hold the selected date and time range: const [selectedRange, setSelectedRange] = useState({ startDate: null , endDate: null }); Render the DateTimeRangePicker component and handle the selection changes: ```jsx const handleRangeChange = (range) => { setSelectedRange(range); }; return ( ); ``` In the example above, the DateTimeRangePicker component is rendered with the onChange event handler and th...
자세한 내용 보기