Why do we use template literals right after function in ES6?

Question

I am learning React.JS and I came across this script where they have used template literals right after the function declared to const Container, the script runs fine, but I don't understand this syntax, I tried searching on google but couldn't find the right article, may be I am using different keywords (= template literals after function in es6/javascript). Can you please explain this syntax?

I got this script from here: https://engineering.datorama.com/mastering-drag-drop-with-reactjs-part-01-39bed3d40a03

import React from 'react';
import styled, { css } from 'styled-components';

export default class Draggable extends React.Component {
/*
 * body of the component
 */
}

const Container = styled.div.attrs({
  style: ({ x, y }) => ({
    transform: `translate(${x}px, ${y}px)`
  }),
})`
  cursor: grab;

  ${({ isDragging }) =>
  isDragging && css`
    opacity: 0.8;
    cursor: grabbing;
  `};
`;