<div id="root">
 
</div>
* {
  box-sizing: border-box;
  outline: none;
  border: none;
  font-family: Arial;
}

#root {
  padding-top: 30px;
  padding-left: 30px;
}

.card {
  /* Properties used for this pen specifically */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Properties used for this pen specifically */
  position:relative;
  float: left;
  width: 350px;
  height: 150px;
  background: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.25s;
  margin: 20px;
  h3 {
    font-size: 2em;
  }

  &:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
  }

  &.rounded {
    border-radius: 5px;
  }

  &.gradient {
    color: white;
    font-weight: bolder;
    &.gradient-1 {
      background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
    }
    &.gradient-2 {
      background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
    }
    &.gradient-3 {
      background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    }
    &.gradient-4 {
      background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    }
  }
  
  .delete-btn {
    cursor:pointer;
    font-weight: bolder;
    font-size: 1.2em;
    position:absolute;
    right: 7px;
    top: 2px;
  }
}
class App extends React.Component {
	render() {
		return (
			<React.Fragment>
				<Card>
					<h3>Normal</h3>
				</Card>
				<Card rounded>
					<h3>Rounded</h3>
				</Card>
				<Card hasGradient gradient="1">
					<h3>Gradient 1</h3>
				</Card>
				<Card hasGradient gradient="2">
					<h3>Gradient 2</h3>
				</Card>
				<Card hasGradient gradient="3">
					<h3>Gradient 3</h3>
				</Card>
				<Card hasGradient gradient="4">
					<h3>Gradient 4</h3>
				</Card>
			</React.Fragment>
		);
	}
}

class Card extends React.Component {
	render() {
		const rounded = this.props.rounded;
		const hasGradient = this.props.hasGradient;
		const gradientNumber = hasGradient ? this.props.gradient : null;

		return (
			<div
				className={`
                    card
                    ${rounded ? 'rounded' : ''}
                    ${hasGradient ? `gradient gradient-${gradientNumber}` : ''}`}
			>
				{this.props.children}
				<span className="delete-btn" onClick={() => alert('Deletion happening')}>&times;</span>
			</div>
		);
	}
}

ReactDOM.render(<App />, document.getElementById('root'));
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.4.0/umd/react.development.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.0/umd/react-dom.development.js