Creating a unique card component with React and custom Tailwind CSS styling

I am working on creating a project component using React:

Despite my efforts, I have not been able to find the correct documentation for assistance. Additionally, I am facing challenges in utilizing next/image to ensure that it is the correct size.

This is my progress so far.

const Project = ({ image, title, description, technologies }) => {
  return (
    <div className="relative w-full h-64 bg-white">
      <Image fill src={"/placeholder.jpg"} />
      <div className="absolute w-[50%] h-8 bg-green-500 top-10 -left-10">
        Express, MongoDB, Node.js, React.js
      </div>
      <p>Project #2</p>
      <p>Blah blah blahs</p>
    </div>
  );
};

Here is how it currently appears:

cssreactjsnext.jstailwind-css

Answer №1

In order to make the inner div overflow 10px to the left of the wrapper div, you can implement the following code snippet:

export function App() {
  return (
    <div style={{ height: '200px',width:"400px", backgroundColor: 'lightgray', padding: '10px', position: 'relative' }}>
      <div style={{ height: '10px', backgroundColor: 'blue', position: 'absolute', left: '-10px', width: 'calc(100% + 10px)' }}></div>
    </div>

  );
}

You can try it out in this react playground

  • The left property of the inner div is set to -10px, which positions it 10 pixels to the left of the left edge of the wrapper div.

  • By setting the width property to calc(100% + 10px), the inner div will span the full width of the wrapper div plus an additional 10 pixels to the left.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Menu not functioning properly on iPhone?

I recently completed a web page that features a fixed menu at the top of the page. Strangely, while the menu works perfectly fine on the Android mobile version, it doesn't seem to function properly on an iPhone. Can anyone shed some light on why this ...

androidhtmlioscssiphone

Is it possible to add data in MongoDB without specifying a field name?

I have a couple of queries that revolve around the same concept: If I want to insert a new 'row' in MongoDB, can I do so by specifying the order of the fields? For instance, if my collection looks like items = { { name: "John", age: "28" ...

javascripthtmlmongodbreactjsmeteor

What is the best way to choose the initial and final <td> that appears within a <tr>?

I am working with an html table that has the following structure: <table> <tbody> <tr> <input type="hidden" name="a" value="x"> <input type="hidden" name="b" value="y"> <td>First Ce ...

javascriptjqueryhtmlcss

Troubleshooting an HTML Design Flaw: How to create a 3x3 table with

I have been attempting to design a HTML page with a 3x3 layout. Despite trying various methods, including divs and tables, I am having difficulty achieving equal spacing around the centered image and the other table rows. Below is an example of the layout ...

htmlcsshtml-table

Replacing text in the main navigation bar with sIFR

Could this menu layout be improved? <div class="navigation"> <ul id="nav-menu"> <li class="active"> <div class="sifr-r active"><a href="#" title="home" class="top-link"><span class="blue-small">01.</span& ...

htmlcsssifr

Setting the "environment" variable in Sentry for different stages within Next.js.orConfiguring Sentry's "environment"

I'm facing the challenge of transitioning from the deprecated Next.js publicRuntimeConfig to using modern .env files that support multiple stages, while also setting a different environment for each deployment. The issue lies in the fact that publicR ...

next.jsenvironment-variablessentry

Concealing a message within a section that has been minimized to a width of 0

Recently, I've encountered a challenge in attempting to set the width of a section to 0 and have all its contents also disappear. Despite changing the section's width to 0px, the text inside continues to be displayed and even shifts off to the si ...

javascriptjquerycss

Tips for securing firebase-admin credentials in Next Js

I've encountered a challenge while using firebase-admin in Next Js. I attempted to hide the firebase service account keys using environment variables, but ran into an issue because they are not defined in server-side on Next JS. As a workaround, I had ...

javascriptfirebasenext.jsenvironment-variablesfirebase-admin

Ways to address the issue of using the keyword 'await' outside of an async function in React

I am currently facing an issue where I need to dynamically retrieve the device's IP address (as it changes over time) in order to fetch JSON data from the database using a specific link like this: https://{ipaddress}:5000/users from a node.js server. ...

node.jsreactjsreact-nativeasync-await

Issues observed when integrating Axios custom instance with Next.js

Initially, I created a custom axios instance with a baseURL and exported it as shown below: import axios from 'axios'; const instance = axios.create({ baseURL: process.env.BACKEND_URL, }); instance.defaults.headers.common['Authorization& ...

javascriptreactjsaxiosnext.js

What is a simple way to center a box on a page without relying on margins?

I'm attempting to position a box in the center of the page without relying on margin. Here's what I've tried so far: .box-middle { vertical-align:middle; height:100px; width:100px; border:1px solid #ddd; } This approach h ...

htmlcssmargin

Create a PDF on-the-fly by leveraging Vuejs to dynamically pull data and design elements

Is it possible to create a form that captures name, expiry date, and picture, and upon submission generates a PDF document with the provided details? The PDF should be based on a design created by me and have the input data displayed in a specific location ...

phphtmlcsslaravelvue.js

What is the process for creating a sub-menu for a dropdown menu item in Bootstrap 5?

https://i.sstatic.net/o4FLn.pngthis is my code which i have created this navigation bar with bootstrap and all of its drop downs but i want to add another drop down to the services drop down section inside of webdevelopment but it can't any easy solut ...

javascripthtmljquerycssbootstrap-5

Modifying the color of the highlighted selection in a dropdown select box

Is it possible to change the blue highlight on this dropdown to gray? Check out this demo of a select box I am aiming to alter the highlight color to gray, can someone help me achieve this? select { border: 0; color: #EEE; background: transparen ...

css

Tips for inserting a string into an array nested within an object stored in a state array

Currently, the variable sizeVariant is a string array and I am trying to append strings to it using an onClick event. The function findIndex seems to be working fine. However, there seems to be an issue with the concatenation section. It appears that using ...

javascriptreactjstypescripttsx

I am attempting to display the Δ symbol on my website, however, it is not appearing on the webpage

In my attempt to display my company logo on the website, I encountered an issue where the Δ symbol is not appearing correctly in the browser. strong class="footer-logo">KyΔnsys</strong To address this problem, I have implemented unicode charset=" ...

htmlcssbrowsersymbolsgraphical-logo

React Leaflet causing a frequent map refresh due to context value updates

When I use map.on('moveend') to update the list of markers displayed in another component, I encounter a refreshing issue. The context in my project contains two arrays - one filtered array and one array with the markers. When I try to update the ...

javascriptreactjsleafletnext.jsreact-leaflet

The height of the first item in the navigation menu seems oddly disproportionate

I've been struggling for nearly an hour to make my navigation menu visually appealing. I'm utilizing Twitter Bootstrap's flat CSS menu. Oddly, the first item in the menu appears taller than all the other items in the list - you can see it h ...

htmlcsstwitter-bootstrap

Exclude specific routes from Next.js dynamic routing

Is it possible to exclude certain dynamic routes in the Next.js framework? Header component: export const DynamicCatPageLinks = () => { const router = useRouter(); const relPath = router.route const { tv } = router.query return ( <Qu ...

reactjsnext.js

How come the last word in CSS nested flexbox wraps even though there is space available?

I am facing an issue with a nested flex container setup. Below is the code snippet: <div class="parent-container"> <div class="child-container"> <span class="color-block"></span> <span>T ...

htmlcssflexbox