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.

댓글

댓글 쓰기

이 블로그의 인기 게시물

Install and run an FTP server using Docker

To install and run an FTP server using Docker, follow these steps. We’ll use the popular stilliard/pure-ftpd image, which is a lightweight and widely used FTP server. Step 1: Install Docker Make sure Docker is installed on your machine. If it isn’t, install it using the instructions below: Ubuntu/Debian: sudo apt update sudo apt install docker.io -y Mac: Install Docker Desktop from Docker's website . Windows: Install Docker Desktop from Docker's website . Verify Docker is installed: docker --version Step 2: Pull the FTP Server Docker Image Use the stilliard/pure-ftpd image, which is a simple and effective FTP server. docker pull stilliard/ pure -ftpd Step 3: Run the FTP Server Run the FTP server container using the following command: docker run -d --name ftp-server \ - p 21 : 21 -p 30000 - 30009 : 30000 - 30009 \ - e FTP_USER_NAME=testuser \ - e FTP_USER_PASS=testpass \ - e FTP_USER_HOME= /home/testuser \ stilliard/pure-ftpd Explanation...
자세한 내용 보기

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

PYTHONPATH, Python 모듈 환경설정

In Python, an environment variable for a module or Python environment is a way to configure certain settings or provide data paths before running a Python program. Environment variables can be used to: Control Python's runtime behavior (e.g., specifying paths for module search). Pass configuration or sensitive data (like API keys) to Python applications. Set up virtual environments for Python project isolation. Here are some common environment variables related to Python and its modules: 1. PYTHONPATH : This variable defines the search path for modules. It allows you to specify additional directories for Python to look for modules and packages. If you want Python to find your custom modules, you can set this environment variable. Example: export PYTHONPATH= "/path/to/your/module: $PYTHONPATH " In Windows: set PYTHONPATH=C:\ path \ to \your\ module ;%PYTHONPATH% This tells Python to also search for modules in /path/to/your/module . 2. PYTHONHOME : ...
자세한 내용 보기

Elasticsearch Ingest API

Elasticsearch Ingest is a feature that allows you to preprocess documents before indexing them. It consists of a pipeline of processors that can manipulate the contents of the documents. One way to test the effectiveness of an Ingest pipeline is to simulate its execution on a sample document. This can be done using the Elasticsearch Ingest API's "simulate" endpoint. To use the "simulate" endpoint, you need to provide a JSON object that represents the document you want to test, and a JSON object that represents the pipeline you want to simulate. Here is an example of how to use the "simulate" endpoint: curl -H 'Content - Type : application/json' -XGET 'localhost : 9200 /_ingest/pipeline/_simulate' -d '{ "pipeline" : { "description" : "Sample pipeline" , "processors" : [ { "set" : { "field" : "foo" , "value" :...
자세한 내용 보기

오늘의 문장2

  I subscribed to a weekly newsletter about upcoming events, which often include concerts and exhibitions that I don't want to miss. 나는 놓치고 싶지 않은 콘서트와 전시회를 자주 포함하는 다가오는 행사에 관한 주간 뉴스레터를 구독했다. We'll update the flight information as soon as the airline confirms the schedule, so that passengers can adjust their plans accordingly. 항공사가 일정을 확인하는 대로 우리는 항공편 정보를 업데이트할 것이며, 승객들은 그에 맞춰 계획을 조정할 수 있다. Police uphold the rule of law, even when facing public criticism, because they believe justice must be maintained at all times. 경찰은 항상 정의가 유지되어야 한다고 믿기 때문에, 대중의 비판에 직면하더라도 법치를 지킨다. He stood upright on the deck, which was swaying with the waves, refusing to give in to fear. 그는 파도로 흔들리는 갑판 위에 똑바로 서서 두려움에 굴하지 않았다. She got superior scores on intelligence tests, which helped her secure a scholarship at a prestigious university. 그녀는 지능 검사에서 우수한 점수를 받아 명문 대학 장학금을 받았다. She didn't believe in supernatural things, even though her friends claimed to have experienced ghosts in the old house. 그녀는 친구들이 ...
자세한 내용 보기

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

Fundamentals of English Grammar #1

That's a great textbook table of contents! It covers the fundamental tenses in English. Here is a summary of the highlighted sections, with example sentences and key learning tips. PRESENT TIME Item Topic Example Sentence(s) Learning Summary 1-1 The simple present and the present progressive Simple Present: The sun rises in the east. (Fact/Habit) / Present Progressive: She is studying for her exam right now. (Action in progress) Simple Present is for facts, habits, and routines . Present Progressive is for actions happening at the moment of speaking or temporary situations . 1-3 Frequency adverbs I always drink coffee in the morning. / He is never late for class. These adverbs ( always, usually, often, sometimes, rarely, never ) describe how often an action occurs. Their position is key: before the main verb, but after the verb to be or auxiliary verbs. 1-4, 1-5 Final -s / Spelling of final -s/-es He read s a book. / She watch es TV. The final -s (or -es ) is adde...
자세한 내용 보기

To switch to a specific tag in a Git repository

To switch to a specific tag in a Git repository, you can use the git checkout or git switch command. Here's how you can do it: 1. List Available Tags First, you may want to see a list of all available tags in the repository: git tag 2. Checkout a Specific Tag Once you know the tag you want to switch to, you can use either git checkout or git switch (if you're using a newer version of Git, which recommends git switch for checking out branches). Using git checkout : git checkout <tag- name > Using git switch (recommended for newer versions of Git): git switch -- detach <tag- name > The --detach flag is necessary because tags are not branches; they are just pointers to specific commits. Using --detach makes your HEAD point to the tag without modifying any branch. 3. Verify the Checkout After switching to the tag, verify that you're on the correct commit: git status This will show the tag you're currently on (you'll see somethi...
자세한 내용 보기

You can use Sublime Text from the command line by utilizing the subl command

You can use Sublime Text from the command line by utilizing the subl command. Here’s how you can set it up and use it: 1. Install Sublime Text If you haven't already installed Sublime Text, download and install it from the Sublime Text website . 2. Add subl Command to Path (if not already done) On macOS: The subl command is typically added automatically, but if it isn't, follow these steps: Open Sublime Text . Press Cmd + Shift + P to open the command palette. Type Install 'subl' command in PATH and select the option to install it. If you prefer to do it manually, you can create a symbolic link: ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/ local /bin/ subl On Linux: If the subl command isn't available, you can create a symbolic link to it: sudo ln -s /opt/ sublime_text /sublime_text /u sr /local/ bin /subl On Windows: You can add Sublime Text to the system PATH manually by: Right-clicking on This...
자세한 내용 보기

티베트-버마어파 와 한어파(중국어파)의 어순 비교

📄 티베트-버마어파 vs. 한어파 어순 비교 구분 티베트-버마어파 (Tibeto-Burman) 한어파 (Sinitic branch) 기본 어순 주어-목적어-동사 (SOV) 주어-동사-목적어 (SVO) 부사 위치 동사 앞에 위치하는 경우가 많음 동사 앞에 위치하는 경우가 일반적 수식어 위치 형용사 및 수식어가 수식 대상 앞에 위치 (일반) 수식어가 수식 대상 앞에 위치 조사/전치사 후치사(postpositions)를 사용하는 경향이 강함 전치사(prepositions)를 사용하는 경향이 강함 문장 예시 (티베트어) ང་ ཟས་ ཟེར་གི་ཡོད་ (나는 밥을 먹는다) (SOV) (중국어) 我吃饭。(나는 밥을 먹는다) (SVO) 1. 기본 어순 차이 티베트-버마어파 는 SOV, 즉 주어(S) 다음 목적어(O), 마지막에 동사(V)가 오는 구조입니다. **한어파(중국어)**는 SVO로, 주어-동사-목적어 순으로 배치됩니다. 이 차이는 문장 구조 전반에 큰 영향을 주며, 두 하위 어파 간 명백한 구분점입니다. 2. 조사와 전치사 사용 티베트-버마어파 언어들은 주로 후치사 를 많이 사용하여, 명사 뒤에 문법적 관계를 나타내는 조사가 붙음. 한어파는 전치사 를 주로 사용하며, 명사 앞에 전치사가 위치함. 예: 티베트어(후치사): ཁྱེད་ལ་ (너에게) 중국어(전치사): 给你 (너에게) 3. 문장 구성 및 부가적 차이 티베트-버마어파는 동사의 부사적 수식어가 동사 앞에 오는 경우가 많으며, 동사 구문이 문장 끝에 집중됨. 중국어는 동사와 목적어가 인접하여 문장 중간에서 동작과 대상이 바로 드러나는 형태를 가짐. 4. 결론 특성 티베트-버마어파 한어파 기본 어순 SOV SVO 조사 사용 방식 후치사 사용 전치사 사용 문장 동사 위치 문장 끝에 위치 문장 중간에 위치 문법적 특징 교착어적 경향 강함 분석어적 ...
자세한 내용 보기