Difficulty encountered in setting the width of a sticky bottom element to be located at the bottom of the page with Tailwind

Question

Difficulty encountered in setting the width of a sticky bottom element to be located at the bottom of the page with Tailwind

Fiddle: https://play.tailwindcss.com/pvT1jW8zZd

Here is the code snippet I am working with:

Here is how it currently appears:

https://i.sstatic.net/2SRny.png

<div class="bg-yellow-300">

<div class="p-16 m-5 text-xl  bg-gray-500 ">
  Koalas are quite interesting animals. What sets them apart is their small brain to body ratio and the fact that their brains are smooth. Unlike other mammals, koalas have smooth brains which limits their cognitive abilities. 
...
In summary, koalas may not be the smartest creatures and are known to have various health issues. Despite this, their cuteness is appealing to many despite their unique physical features.
</div>

    <div class="bg-blue-500 sticky text-xl   bottom-5 right-5
     
           rounded-lg  p-5 ">
         <a >UP</a>
     </div>

</div>

However, I would like it to appear like this instead:

https://i.sstatic.net/nVMPK.png

How can I achieve this layout? I am seeking to adjust the button width to fit the content ('UP') and the specified padding.

html css tailwind-css

Answer 1

Answer №1

align it to the right (using the class float-right)

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="bg-yellow-300">

<div class="p-16 m-5 text-xl  bg-gray-200 ">
  Koalas are incredibly unpleasant creatures. They possess one of the smallest brain to body ratios among mammals, and their brains are notably smooth. A folded brain increases surface area for neurons, but koalas lack this feature. They cannot adapt their feeding behavior and can starve in the presence of abundant food. Their dietary staple, eucalyptus leaves, are both toxic and low in nutrients, forcing koalas to ferment them for days to extract minimal sustenance. Koalas have evolved a hind gut with a substantial body ratio, but their teeth wear down quickly on their diet. In severe cases, koalas starve due to dental erosion. The young are raised on nutrient-poor milk and must transition to eucalyptus leaves, which they struggle to digest due to a lack of gut flora. To aid in digestion, joeys consume partially digested fecal pap from their mother's anus. Additionally, koalas suffer from high rates of chlamydia and exhibit aggressive behavior, including rape. Their brains have an excess of cerebrospinal fluid to protect them from falls, showcasing their lack of intelligence. In summary, koalas are unintelligent, disease-ridden creatures with horrifying anatomical features.
</div>

    <div class="bg-blue-500 sticky text-xl float-right  bottom-5 right-5

           rounded-lg  p-5 ">
         <a >UP</a>
     </div>

</div>

Alternatively, use inline-block and text-align

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="bg-yellow-300">

<div class="p-16 m-5 text-xl  bg-gray-200 ">
  Koalas are incredibly unpleasant creatures. They possess one of the smallest brain to body ratios among mammals, and their brains are notably smooth. A folded brain increases surface area for neurons, but koalas lack this feature. They cannot adapt their feeding behavior and can starve in the presence of abundant food. Their dietary staple, eucalyptus leaves, are both toxic and low in nutrients, forcing koalas to ferment them for days to extract minimal sustenance. Koalas have evolved a hind gut with a substantial body ratio, but their teeth wear down quickly on their diet. In severe cases, koalas starve due to dental erosion. The young are raised on nutrient-poor milk and must transition to eucalyptus leaves, which they struggle to digest due to a lack of gut flora. To aid in digestion, joeys consume partially digested fecal pap from their mother's anus. Additionally, koalas suffer from high rates of chlamydia and exhibit aggressive behavior, including rape. Their brains have an excess of cerebrospinal fluid to protect them from falls, showcasing their lack of intelligence. In summary, koalas are unintelligent, disease-ridden creatures with horrifying anatomical features.
</div>

    <div class=" sticky text-xl bottom-5 mx-5 text-right">
         <a class="inline-block rounded-lg  p-5 bg-blue-500">UP</a>
     </div>

</div>

Answer 2

align it to the right (using the class float-right)

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="bg-yellow-300">

<div class="p-16 m-5 text-xl  bg-gray-200 ">
  Koalas are incredibly unpleasant creatures. They possess one of the smallest brain to body ratios among mammals, and their brains are notably smooth. A folded brain increases surface area for neurons, but koalas lack this feature. They cannot adapt their feeding behavior and can starve in the presence of abundant food. Their dietary staple, eucalyptus leaves, are both toxic and low in nutrients, forcing koalas to ferment them for days to extract minimal sustenance. Koalas have evolved a hind gut with a substantial body ratio, but their teeth wear down quickly on their diet. In severe cases, koalas starve due to dental erosion. The young are raised on nutrient-poor milk and must transition to eucalyptus leaves, which they struggle to digest due to a lack of gut flora. To aid in digestion, joeys consume partially digested fecal pap from their mother's anus. Additionally, koalas suffer from high rates of chlamydia and exhibit aggressive behavior, including rape. Their brains have an excess of cerebrospinal fluid to protect them from falls, showcasing their lack of intelligence. In summary, koalas are unintelligent, disease-ridden creatures with horrifying anatomical features.
</div>

    <div class="bg-blue-500 sticky text-xl float-right  bottom-5 right-5

           rounded-lg  p-5 ">
         <a >UP</a>
     </div>

</div>

Alternatively, use inline-block and text-align

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<div class="bg-yellow-300">

<div class="p-16 m-5 text-xl  bg-gray-200 ">
  Koalas are incredibly unpleasant creatures. They possess one of the smallest brain to body ratios among mammals, and their brains are notably smooth. A folded brain increases surface area for neurons, but koalas lack this feature. They cannot adapt their feeding behavior and can starve in the presence of abundant food. Their dietary staple, eucalyptus leaves, are both toxic and low in nutrients, forcing koalas to ferment them for days to extract minimal sustenance. Koalas have evolved a hind gut with a substantial body ratio, but their teeth wear down quickly on their diet. In severe cases, koalas starve due to dental erosion. The young are raised on nutrient-poor milk and must transition to eucalyptus leaves, which they struggle to digest due to a lack of gut flora. To aid in digestion, joeys consume partially digested fecal pap from their mother's anus. Additionally, koalas suffer from high rates of chlamydia and exhibit aggressive behavior, including rape. Their brains have an excess of cerebrospinal fluid to protect them from falls, showcasing their lack of intelligence. In summary, koalas are unintelligent, disease-ridden creatures with horrifying anatomical features.
</div>

    <div class=" sticky text-xl bottom-5 mx-5 text-right">
         <a class="inline-block rounded-lg  p-5 bg-blue-500">UP</a>
     </div>

</div>

Difficulty encountered in setting the width of a sticky bottom element to be located at the bottom of the page with Tailwind

Answer №1

Similar questions

Making the dropdown width of the shiny selectInput customizable

Is it possible to utilize CSS to form a triangle outline on the right-hand side of a Bootstrap list group?

The JavaScript script to retrieve the background color is malfunctioning

Trouble with JavaScript preventing the opening of a new webpage

Modify the icon in the header of MaterializeCSS Collapsible when it is opened

What is the most efficient way to evenly separate a CSS3 gradient?

When a CSS fluid layout includes a containing div with margin or padding, it may lead to

Looping through mysql data horizontally within a div tag

Using Node.js to send instructions to an HTTP server in order to highlight or add color to specific elements within

The border class in Bootstrap 4 seems to be malfunctioning when it comes to the top

AngularJS enables you to easily manipulate image width and height using the ng-file-upload feature

Is it possible to represent a recursive variable using CSS?

Ensure that the top of a div stays in place as the user scrolls, and spans the entire width of the div

Simplified user interface for detecting radio button clicks

CSS - selecting elements that are greater than a specific criteria N

Setting the dimensions of an HTML - CSS block

Break the page after generating specific charts with JQuery

How can I emphasize only a portion of a word in ReactJS and Material UI?

Adjusting the Height of the Video Jumbotron in Bootstrap

retrieving embedded content from an iframe on Internet Explorer version 7