tonality/packages/app-web/src/components/molecules/presentation/Card/index.tsx

import {FC} from 'react';
import styled from 'styled-components';

const Base = styled('div')({
	borderRadius: '0.25rem',
	position: 'relative',
	padding: '1rem',
	boxSizing: 'border-box',
	'::before': {
		content: "''",
		position: 'absolute',
		top: 0,
		left: 0,
		width: '100%',
		height: '100%',
		boxSizing: 'border-box',
		borderRadius: 'inherit',
		pointerEvents: 'none',
		backgroundColor: 'white',
		mixBlendMode: 'screen',
		opacity: 0.125,
	},
	'::after': {
		content: "''",
		position: 'absolute',
		top: 0,
		left: 0,
		width: '100%',
		height: '100%',
		boxSizing: 'border-box',
		borderRadius: 'inherit',
		pointerEvents: 'none',
		border: '1px solid',
		opacity: 0.5,
	},
})

const Content = styled('div')({
	position: 'relative',
})

type Props = {
	className?: string,
}

const Card: FC<Props> = ({
	children,
	...etcProps
}) => {
	return (
		<Base
			{...etcProps}
		>
			<Content>
				{children}
			</Content>
		</Base>
	)
}

export default Card