Create fixed rounded button by Tailwind

To create a fixed, rounded button using Tailwind CSS, you can combine Tailwind's fixed utility (for positioning) with the rounded classes (for rounding the button). This is useful if you want a button that stays in a fixed position on the screen, such as at the bottom-right corner.

Here’s how to do it:

Example of a Fixed Rounded Button

<button class="fixed bottom-4 right-4 bg-blue-500 text-white px-6 py-3 rounded-full shadow-lg">
  Fixed Button
</button>

Explanation:

  • fixed: Positions the button fixed relative to the viewport. It will stay in the same position even when the user scrolls.
  • bottom-4: Positions the button 1rem (16px) from the bottom of the screen.
  • right-4: Positions the button 1rem (16px) from the right side of the screen.
  • bg-blue-500: Sets the background color to blue.
  • text-white: Sets the text color to white.
  • px-6 py-3: Adds horizontal (px-6) and vertical (py-3) padding for sizing the button.
  • rounded-full: Makes the button fully rounded (pill shape).
  • shadow-lg: Adds a large shadow for a 3D effect.

Fixed Button with Hover Effect

You can also add a hover effect to make the button interactive:

<button class="fixed bottom-4 right-4 bg-green-500 text-white px-6 py-3 rounded-full shadow-lg hover:bg-green-700 transition duration-300">
  Fixed Button
</button>

Explanation of Hover Effect:

  • hover:bg-green-700: Changes the button's background color to a darker green when hovered over.
  • transition duration-300: Smoothens the hover transition over 300ms.

Fixed Floating Action Button Style

If you want the button to be smaller, like a floating action button (FAB), you can modify the size and use an icon instead of text:

<button class="fixed bottom-4 right-4 bg-red-500 text-white p-4 rounded-full shadow-lg">
  <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
  </svg>
</button>

Explanation:

  • p-4: Adjusts padding to make the button smaller and more compact.
  • The button contains an SVG icon, which makes it look like a floating action button (FAB), commonly used in mobile UIs.

Customizing Position:

You can adjust the bottom, right, top, or left classes to change the position of the button:

  • bottom-0 for sticking to the bottom.
  • top-0 for sticking to the top.
  • left-4 for placing the button on the left side.

This fixed, rounded button will remain in position regardless of scrolling and can be used for various actions like scrolling to the top, opening a modal, or performing a quick action.

댓글

댓글 쓰기

이 블로그의 인기 게시물

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...
자세한 내용 보기