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

Trouble arises when the properties of this.props are supposed to exist, yet they are not

Wow, what a name. I am struggling to come up with a better title given my current state. The problem at hand is as follows: When using React, I set the state to null during componentWillMount. This state is then updated after data is fetched from a serve ...

javascriptajaxreactjs

Tips for creating multiple popups using a single line of JavaScript code

I am new to JavaScript and I am attempting to create a popup. However, I am facing an issue in opening two divs with a single line of JavaScript code. Only one div opens while the other remains closed despite trying various solutions found on this website. ...

javascripthtmlcsspopup

Is it necessary to utilize ngrok to expose both front and back ends in a MERN stack in order for CRUD operations to function properly?

Currently, I am working on developing a MERN app on my local machine. The front end portion of the application can be accessed at localhost:3000 While the back end is running on localhost:3003 In the front end code, there is a request configured as: ax ...

node.jsreactjsmongodbexpressngrok

Navigating to a specific page in React Router by passing parameters within

Currently, I am experimenting with a React app that is integrated with a Star Wars API that I have developed locally. The first two routes are functioning properly, but I am encountering issues with the third one. It seems like the second component is int ...

reactjsreact-routerjsx

What could be causing axios to not function properly when used with async/await in this particular scenario

I need to update the DoorState when a button is clicked. After sending a request to the API to change the DoorState, I then call another API to check the status of the robot. Even though the DoorState has been successfully changed, it seems that the chan ...

javascriptreactjstypescriptnext.js

The vertical spacing in Font "bottom-padding" appears to be larger than anticipated

Recently, I purchased the font Proxima Nova for my project and I am encountering issues with vertical alignment. Despite setting margins, line-heights, and padding to match those of Arial, the results are not consistent as the Proxima Nova appears misalign ...

htmlcssfontsless

React Native: Image display issue

I'm facing a problem with displaying an image. I've followed all the steps correctly as per a tutorial, but for some reason, my image is not showing up while the author's images are displayed perfectly. What could be causing this issue? I ha ...

reactjsreact-native

Create styles for each component based on their specific props when designing a customized Material-UI theme

I am having trouble styling the notchedOutline of a disabled <OutlinedInput /> in my custom MUI theme. My goal is to make the border color lighter than the default color when the input is disabled. Here is what I have attempted so far: const theme = ...

javascriptcssreactjsmaterial-ui

Deletion of component with setTimeout in React Class Component

I have a notification feature that disappears after a certain delay when rendered. The issue arises when attempting to cancel this automatic removal using clearTimeout, as it doesn't seem to work. See below class Notify extends React.Component { ...

javascriptreactjs

How to Customize the Drawer Color in Material-UI v5

I'm currently using MUI v5 in my project and I am encountering some challenges while attempting to style a Drawer component with a black background color. As this update is relatively new, I have not been able to find much information on customizing t ...

cssreactjsmaterial-uimaterial-design

How to use fp-ts to add an element at a specified index using insertAt function

Is there a way to easily add elements at a specific index using the insertAt utility function from fp-ts? The insertAt function returns either Option<T[]> or NonEmptyArray, resulting in an object structure like this: const x = insertAt(1, 100)([0, 10 ...

reactjsfunctional-programmingfp-ts

Changing an array into an object in JavaScript without rearranging the keys

I have a collection { 1: {id: 1, first: 1, last: 5} 2: {id: 2, first: 6, last: 10} 3: {id: 3, first: 11, last: 15} } My goal is to reverse the order of items without rearranging the keys so that it looks like this: { 1: {id: 3, first: 11, last: 15} 2: { ...

javascriptreactjstypescriptsortingjavascript-objects

The ability to update a variable passed through the state in Link is restricted

Currently, I am in the process of updating the theme in my App using useState. The updated theme is passed to the Topbar Component as a prop, triggering console.log() every time it changes. The theme is then passed from the Topbar to the AboutMe Component ...

javascriptreactjshyperlinkstate

Utilizing CSS to Select Specific Sections

I'm curious about how to target a section element with a specific id like #dress in CSS3. Here is my code snippet: <section id="dress"> <p>Lorem Ipsum..................................of Lorem Ipsum.<> </section> Here's ...

css

Sending a function along with event and additional arguments to a child component as a prop

I've managed to set up a navigation bar, but now I need to add more complexity to it. Specifically, I have certain links that should only be accessible to users with specific permissions. If a user without the necessary permissions tries to access the ...

javascriptreactjs

What causes an error when the App is enclosed within a Provider component?

What is causing the error when wrapping the App in Provider? Are there any additional changes or additions needed? Error: "could not find react-redux context value; please ensure the component is wrapped in a @Provider@" import React from ' ...

reactjstypescriptreact-testing-library

Using kebab-case in CSS properties within objects is not applicable. Perhaps you intended to use MozAppearance instead?

Error encountered at InputBase (webpack-internal:///../../node_modules/@mui/material/InputBase/InputBase.js:299:83) It is not recommended to use kebab-case for css properties in objects. Perhaps you intended to use MozAppearance instead? Incorrect usage ...

reactjsmaterial-uiemotion

Displaying a segment of information extracted from a JSON array

I'm currently tackling a project that involves using React, Redux, and TypeScript. Within the JSON file, there is a key-value pair: "data_start": "2022-09-02" Is there a way to display this date in a different format, specifical ...

reactjsjsontypescriptredux

The Children Element in Next.js and React Context with TypeScript is lacking certain properties

Encountering a mysterious error while trying to implement React's Context API in Next.js with TypeScript. The issue seems to be revolving around wrapping the context provider around the _app.tsx file. Even though I am passing values to the Context Pr ...

reactjstypescriptnext.js

What's the connection between CSS and frameset?

Currently, I have an .html document with XHTML 1.0 Frameset doctype and the following code: <frameset rows="20%, 80%" border="1"> ... </frameset> Upon validating this code on W3C Validator, it gives me the error message: there is no a ...

htmlcssframesframeset